vue+vscode工具零基础入门学习

编辑工具：VS code或者notepad都是不错的选择，开源并且社区活跃度不错，选他没错

• 直接搜索对应关键词即可下载官方版本，免费使用
• 贴一下网址：vscode工具的下载链接
• vscode下载和安装工具教程：vscode

---

下载vue源码：vue下载网址

• 楼主使用的是引入的方式，先点击开发版本，然后将里面的内容复制Ctrl+A 然后Ctrl+c ，再创建vue.js文件粘贴过去即可；
  

• 第一次使用vscode所以都不会用，首先左上角创建一个file保存后选择修改文件名和文件类型，创建HTML可以直接按！+Tab键添加HTML模板（vscode并不是在创建的时候选择文件类型，而是在保存的时候选择文件的类型并且创建名字这点和idea不同，但是mysql中保存也是这样，能理解）
  

---

常用插件：

highlight-icemode 高亮搜索
open in browser vs中打开html到浏览器
LiveReload 浏览器和vs中动态显示
Chinese (Simplified) Language Pack for Visual Studio Code 中文导航栏
translate to chinese 翻译(translate to chinese)
IntelliJ IDEA Keybindings 与idea的快捷键映射

创建一个实例

• vs中预览HTML文件以及vscode中安装浏览器： 安装教程
  
  使用vue与原来不同的是我们不需要对dom元素直接操作，使我们着重对数据的编写，div标签中使用占位符，vue接管dom的操作，页面成功显示
  

---

vue中挂载点、模板、实例之间的关系

• 简而言之，Vue为实例，div为vue实例的挂载点，template为模板，用于挂载点展现的内容
• 将下面的div元素称为vue实例的挂载点，因为div的id和实例el所选中的id是同样的
  vue实例只会处理el属性所对应的id的所对应的id元素，模板指的就是挂载点中的内容，可以写在template

Vue实例中的数据、事件和方法

• v-html="" 会将文本内容中的标签转译为标签
• v-text="" 不会转译，之间输出内容
• v-on:click=“functionName” 为元素添加点击事件，可以简写为@click="functionName"

代码示例：

        new Vue({
            el: "#root",
            data: {
                content: "
hello
",
                msg: "hello "
            },
            // methods中定义点击事件中的众多方法
            methods: {
                // 对应上面的div点击事件，定义在Vue对象中
                handleClick: function () {
                    // alert(123) 点击后弹窗123
                    //this代表当前对象Vue中data的对应数据；点击div标签后触发vue实例的点击事件handleClick（）
                    // 事件中将content的原本hello内容替换为world内容
                    this.content = "world"
                }
            }
        })

完整代码图

---

属性绑定和双向数据绑定

• title=“this is hint” : title属性代表鼠标悬浮标签上时所给的提示
• v-bind:title="'str '+title"（v-bind：可以直接简写为一个冒号：） : 代表将title中的title值绑定的是对象中data的title属性所对应的值故只要有v-bind 就代表后面属性所对应的字符串不是字符串了，而是js表达式，代表的是data的属性,可以写很多代码，如果确实是想标识字符串，可以在双引号中使用单引号代表字符串
• v-model=“title” 的作用是v-bind的增强。v-bind只能将data中指定名字的变量名数据绑定到元素中，无法在元素改变的时候让改变量名也随之变化，例如input输入框，既可以用于展示数据也可以用于修改数据，这时使用v-model才能发挥他的正真作用

代码示例:

 
    

        
hello world
        
        
        
{{title}}
    
    

代码截图:

效果图：

---

Vue中的计算属性和侦听器

• computed 计算属性（性能要求较高，依赖的属性发生变化才能计算，否则取内存中的值)，通过多个变量值来计算一个值的结果；作用：一个属性的值是根据其他属性或者多个属性计算得到结果
• watch 侦听器 作用是去侦听某一个数或者计算属性发生变化，如果发生变化需要相关的处理，则可以使用watch侦听器

代码示例：

        姓：
        名：
        全名：
{{fullName}}
        改变次数:
{{count}}
    
    

完整截图：

---

v-if,v-show ,v-for指令的基本使用和介绍

• v-show 通过结合show变量定义boolean值标签内的信息展示与隐藏的效果
• v-if 判断，相当于java中的if(){}，然后括号内的布尔值就是条件，满足就执行
  注：v-show和v-if都可以达到标签内的信息展示和隐藏的效果，本质区别在于，v-if在不满足条件时是将dom元素直接销毁，而v-show是将dom元素的display属性设置为non，频繁切换的话show效率会更高
• v-for="(item,index) of list" :key=“index” 等同于java中的for循环，可用于循环显示数组中的元素然后展示出来；其中item代表数组中每一项的内容，index代表当前遍历的下标，list代表data中的数组名即需要遍历的数组，:key用于提高遍历的效率，提升渲染度

代码示例：

    

        
hello world
        toggle
        

        //遍历list数组，item为每一项，index为下标
            
{{item}}
        
    
    

截图：

---

TodoList功能开发

实现的效果：在输入框中输入值，点击提交后提交的值显示在页面上，并每次提交清空输入框的值

代码示例：

        

            //双向绑定数据
            请输入：
            //添加绑定事件
            提交
        
        

            
{{item}}
        
    
    

代码截图：

---

TodoList中组建的拆分

上面项目中什么地方能够拆分：

标签中由于是在显示输入框中的消息，如当标签内容很庞大的时候，可以对器进行组建拆分

定义一个全局组件代码示例：

//使用组件

//定义组件（全局组件）
        Vue.component('todo-item', {
            //组件的模板
            template: '
item
'
        })

完整图：

定义一个局部组件相对麻烦，直接上图：

组建拆分后完整版代码：

        

            请输入：
            提交
        
        

            {{item}}
        
    
    

---

删除功能

• 主要解决主副组件通讯传值的问题
• 实例代码

        

            请输入：
            提交