常见指令：

1. v-if:当对应data中的值show是true时显示，为false，则将标签直接移除。

2. v-show:而当对应指令值为false时，div标签会隐藏，就会把div标签的display属性变成none；

   *选择v-show性能比较高，每次不会销毁和显示。如果是只是用一次则使用v-if;
   

3. v-for:当有一个数据需要做循环展示时，并循环展示li标签；

   *使用时加一个key的属性，可用每个项如item为key值（每一项内容都不同时可用），或者使用index作为key值，但是频繁对列表变更则不应该使用index值。

   
   

   每一项key值都不同。目的是提升每一项的渲染速率。

计算属性：

在Vue实例中：computed表示是一个计算属性。（一个属性通过其他属性计算而来）

优点：如果其他值没有改变，不会重新计算，则会使用上一次的缓存结果。

侦听器：监测某个计算属性发生的变化 ，一旦发生变化则可以在侦听器中写一些业务逻辑。

watch

侦听器 watch：

    监听变化。如果侦听的数据发生改变，就执行侦听器里面相应的改变数据的函数

computed: 操作的是一个属性从其他属性计算而来。

它有一个好处：

    如果其中的数据没有改变，每一次使用计算得出来的数据的时候，它会使用上一次计算属性的缓存结果。

    里面的数据改变了之后，才会重新去计算得出最新的值。

this.list.splice(index,1)

计算属性（computed:）：一个属性通过其他属性计算而来（只有它依赖的数据发生变化的时候，它才会重新计算；如果依赖的属性没有发生变化，它会利用以前计算结果的缓存来在页面上做显示）

先去安装node,安装完node自动安装npm

在Vue里 ，每一个Vue组件，都是一个Vue实例  【实例=组件】；

Vue实例有的功能，Vue组件都拥有。

每个组件都是vue的实例；

每个实例的组成部分：

props、template、data、methods...

每一个组件都有一个template模板，如果没有写template，默认为挂载点下面的所有DOM标签作为模板。

v-if和v-show：这两个属性用来控制dom显示隐藏，当值为true则显示，为false则隐藏。if和show的一大区别在于if是通过销毁dom的方式实现隐藏，而show是通过display=false的方式实现的，具体需要灵活使用；

v-for属性：主要用于遍历数组数据，并自动生成dom列表。如v-for='(item, index) of list'  :key='index'，其中:key必须是唯一的，item是遍历出的子项；

vue安装（需要先安装node，，略）

用脚手架工具创建项目

1、npm install -global vue-cli          全局安装vue脚手架工具  vue-cli

2、vue init  webpack   my_project   创建一个基于webpack模版的新项目

3、cd my-project   进入到项目目录

4、npm run dev   运行项目

主要编写scr目录下的文件，main.js是整个项目的入口文件

关于vue-cli下载成功但项目创建不成功的问题，看到有很多同学有这个问题，这里有我的解决办法，希望能帮到大家

https://blog.csdn.net/qq_41594043/article/details/90411988

1. v-if 是删掉前端代码

2. v-show只是改变css属性

3. 如果是频繁的修改html，使用v-show更好。

4. v-for，列表展示，语法，v-for="item of list"

5. v-for="(item,index) of list" :key="index" 提高性能
   

每一个vue的组件就是vue的实例，所以vue的组件里可以写入methods

任何一个vue的项目都是由千千万万个vue的实例组成的

创建全局组件：

 Vue.component(todo-item,{template:'<li>item</li>'})

创建局部组件：

var TodoItem={template:'<li>item</li>'}

调用局部组件时需要在new vue中声明

 components:{'todo-item':TodoItem}

组件传参

<todo-item v-for='item of list' :content='item'></todo-item>

Vue.component('todo-item',{

props:['content'],        //接收外部传进来的名为content的属性

template:'<li>item</li>'})

<todo-item v-for="(item,index) of list"

:key="index"

:content="item"

:index="index"//在父组件设置一下下标以供子组件调用

@delete="handleDelete">//@delete监听子组件向外触发的delete事件,并执行自己的handleDelete方法

</todo-item>

Vue.component('todo-item',{

props:['content','index'],//index 调用父组件index下标

template:'<li @click="handleClick"></li>',

methods:{

handleClick:function(){

this.$emit('delete',this.index)//当子组件被点击的时候，需要通知父组件把数据删除。delete 是自定义事件，传递的值是index,通过this.index获取

}

}

})

new Vue(function(){

    el:"#root",

  data:{

inputValue:'',

list:[]

},

methods:{

handelSubmit:function(){

this.list.push(this.inputValue)

                        this.inputValue=''

},

handleDelete:function(index){//在方法里接收到传递过来的参数，即index下标

this.list.splice(index,1)//把父组件数组里对应下标的内容删除

}

}

})