Vue的了解认识

VUE

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增

Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的API实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言

Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统

• Vue.js官方文档： https://cn.vuejs.org/v2/guide/
• vue.js下载地址： https://cn.vuejs.org/v2/guide/installation.html
• npm配置cnpm
• windows下配置cnmp环境：
• 默认的使用NPM可能会因为网络问题而导致无法使用或延迟居高，可以使npm升级为cnpm，从国内淘宝镜像中加载所需的npm软件源

npm install -g cnpm --registry=https://registry.npm.taobao.org
设置安装包缓存路径

cnpm config set cache “C:\nodejs\node_cache”
设置安装包位置

cnpm config set prefix “C:\nodejs\node_global”
之后使用命令安装的模块存储在C:\nodejs\node_global\node_modules里

• 请按照个人需求设置你的文件位置

npm config set cache "C:\nodejs\node_cache"
Vue部署
安装Vue
cnpm install vue -g
安装vue脚手架
cnpm install vue-cli -g
-g参数代表全局位置安装，这样可以在环境变量生效的情况下直接在命令行等工具下使用vue命令行进行项目的开启

vue-devtools调试工具
vue-devtools可以方便开发者进行Vue中变量等信息的调试跟踪

下载vue-devtools

git clone https://github.com/vuejs/vue-devtools
进入到vue-devtools目录下安装依赖包
cd vue-devtools-dev
cnpm install 
cnpm run build
注意：在进行调试工具安装时，首先需要修改shells>chrome文件夹下的mainifest.json中的persistent为true
将插件目录下的chrome文件夹拖入到chrome浏览器的扩展程序下，记得打开调试模式
扩展程序可以通过浏览器访问

1561789924

chrome://extensions/

Vue-CDN

除去通过npm安装的方式来使用vue，还可以直接使用cdn中的vue.js文件

vue.js：开发版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
vue.min.js：生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue语法
每个vue应用都是通过实例化一个新的vue对象开始的

创建第一个模板语法：
<div id="content">
    {{ message }}
    <!-- 这个也叫做插值表达式 -->
</div>
var vm = new Vue({ // vm这个变量不允许使用连字符，可以使用下划线，比如vm-data是不允许的
    el: "#content", 
    // 对应document中的一个标签，当vue对象创建后，这个标签内的区域就被接管
    data: {
        message: "这是vue里的变量"
    }
})
当一个vue实例被创建时，vue的响应式系统中加入了对其data对象中能找到的所有属性

当这些属性值被改变时，视图也会发生相应，并将对应属性更新为新的值

也可以通过定义函数来改变实例中data对象中的数据，数据改变，视图中的数据也将改变

<div id="app">
    <p>{{ message }}</p>
    <button @click="ChangeMsg">改变</button>
    <!-- 绑定点击事件为定义好的vue函数 -->
</div>
window.onload = function(){
    var vm = new Vue({
        el: "#app",
        data: {
            message: "我对应的是message的变量"
        },
        methods:{ // 定义一个函数 并绑定在按钮的点击事件上
            ChangeMsg:function(){
                this.message = "我被改变了";
                // 修改当前实例中的message变量
            }
        }
    })
}
这里的代码，将在点击按钮时，使当前的message变量发生变化

这样的语法有点类似一些Web框架，比如django的模板语言中的模板变量

返回值

除了直接定义某个变量的固定值进行页面渲染，模板变量还支持通过函数的返回值进行赋值

<div id="app">
    <h1>{{ classType }}学习</h1>
    <p>{{ content }}</p>
    <span>{{ describe() }}</span>
</div>
window.onload = function(){
    var vm = new Vue({
        el: "#app", // getElementById('app')
        data: {
            classType: "vue",
            content: "这是vue的一个测试",
        },
        methods:{
            describe:function(){
                return "这是一个函数的返回值"
            },
        }
    })
}

Vue模板指令

模板语法指的是如何将数据放入html中
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层 Vue 实例的数据

所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和HTML 解析器解析

插入值，模板变量
数据绑定最常见的形式就是使用Mustache语法(双大括号) 的文本插值，也就是上面示例中的

内容绑定
v-html
将内容按照html格式进行插入

<div id="app">
    <p v-html="contetn"></p>
</div>
var vm = new Vue({
    el: "#app",
    data: {
      content: "<b>段落标签</b>文本内容"  
    },
})

在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击

v-html一般只用在可信内容中，永不用在用户提交的内容上

v-text
将内容按照文本格式进行插入，但会覆盖原有标签内的内容，不会有加载的闪烁问题

<div id="app">
    <p v-text="contetn"></p>
    <p>
       	{{ gender ? '男' : '女' }}
        <!-- ok? true:false -->
    </p>
	
</div>

var vm = new Vue({
    el: "#app",
    data: {
      	gender: true, // 变量值为true时，显示模板变量中左边的值
      	content: "<b>段落标签</b>文本内容"  
    },
})


v-cloak
解决使用差值表达式时页面渲染过程，由于变量没有初始化而导致的闪烁问题

通俗的来说，比如变量的实际内容没有被创建，那么此时页面只会展示出这样的效果，之后当变量初始化之后，将变化为实际的值，此时变化的过程我们称作闪烁

这个指令可以隐藏未编译的标签直到实例准备完毕

<div id="app">
    {{ message }}
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data:{
            message: "测试",
        }
    })
</script>
在上面的代码中，如果网速够慢的清空下，页面首先加载显示出的内容是
解决办法：通过v-clock指令，在使用到模板变量的标签上写入，并设置一个v-clock的类样式
<style type="text/css">
    [v-cloak]{
        display: none;
    }
</style>
<div v-cloak id="app">
	<p v-cloak>{{ message }}</p>
</div>
属性绑定
v-bind
如果我们需要设置的模板变量是一个属性，比如a标签的href属性

<div id="app">
    <a v-bind:href="message">连接</a>
    <a :href="message +'abc'">连接</a>
    <!-- 属性内的模板变量写法已被移除，使用v-bind:attr 或 :attr -->
</div>
var vm = new Vue({
    el: "#app",
    data: {
    	message: "https://www.baidu.com"
	}
})
可以通过v-bind指令或者:的简写对某个dom元素的属性进行绑定

在下面还有更加详细的属性绑定示例

事件绑定
v-on
给元素绑定对应事件，以下是对于点击事件的绑定

<div id="app">
    <button v-on:click="show">按钮</button>
    <button @click="show">按钮</button>
</div>
new Vue({
	el: "#app",
    method: {
    	show: function(){
			alert("弹一下")
        }    
    }
})

跑马灯效果

这里有一个跑马灯效果可以玩耍

<div id="app">
    <h3 v-html="message"></h3>
    <button @click="start">开始</button>
    <button @click="stop">停止</button>
</div>
new Vue({
    el: "#app",
    data: {
        message: "这是一个跑马灯",
        sT: null, // 定时器实例
    },
    methods:{
        work(){
            this.message = this.message.substring(1) + this.message[0] 
            // 循环定时器所作的事情
        },
        start(){
            if (this.sT==null) { // 判断此时是否已有定时器开启
                console.log("开启定时器")
                this.sT = setInterval(this.work,400)
            } else {
                console.log("已经开启 不在开启")
            }

        },
        stop(){ // 关闭定时器 设置定时器变量为null
            console.log("关闭定时器")
            clearInterval(this.sT)
            this.sT = null
        }
    }
    

绑定事件修饰符

阻止冒泡
比如一个按钮在一个div中，并且按钮和div均有自己的事件，那么此时点击按钮，事件会像冒泡一样从按钮开始一直到div进行触发，.stop修饰符用来阻止默认的事件触发行为

<div id="fDiv" @click="divClick">
    <button id="fBtn" @click="btnClick">按钮</button>
</div>
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el: "#fDiv", // 控制区域
            data: {},
            methods: {
                divClick(){
                    console.log("div被点击了")
                },
                btnClick(){
                    console.log("按钮被点击了")
                }
            },
        })
    }
</script>
通过.stop修饰阻止冒泡
<div id="fDiv" @click="divClick">
    <button id="fBtn" @click.stop="btnClick">按钮</button>
</div>

阻止默认行为

比如像a标签这样的，在点击时他有默认的跳转动作，可以通过.prevent阻止该默认行为

<div id="fDiv">
	<a href="https://www.baidu.com" @click.prevent="aLink">去百度</a>
</div>
var vm = new Vue(){
    el: "#fDiv",
    methods:{
    	aLink(){
    		console.log("连接被点击")
        }
    }   
}

捕获事件

默认的事件触发处理机制是冒泡机制，capture代表具有该修饰的事件，会优先触发，脱离冒泡顺序；

也可理解为谁有该修饰符，先触发谁的事件

<div id="fDiv" @click.capture="divClick">
    <button id="fBtn" @click="btnClick">按钮</button>
</div>
<script type="text/javascript">
    window.onload = function(){
    var vm = new Vue({
        el: "#fDiv", // 控制区域
        data: {},
        methods: {
            divClick(){
                console.log("div被点击了")
            },
            btnClick(){
                console.log("按钮被点击了")
            }
        },
    })
    }
</script>

自身事件

与capture和冒泡不同，.self只有是自身触发的当前的事件才真正执行处理的回调函数

并且.self只会阻止当前元素的事件触发行为

<div id="fDiv" @click.self="divClick">
    <button id="fBtn" @click.self="btnClick">按钮</button>
</div>
// 与上同
单次事件
使用.once只触发一次事件函数

<div id="fDiv">
    <a href="https://www.baidu.com" @click.prevent.once="aLink">去百度</a>
    <!-- 连接无法跳转的阻止事件 只会出现一次 -->
</div>
var vm = new Vue(){
    el: "#fDiv",
    methods:{
    	aLink(){
    		console.log("连接被点击")
        }
    }   
}

表单双向绑定

v-model
使用v-model指令可以在表单input、textarea以及select元素上创建双向数据绑定

根据表单上的值，自动更新模板变量中的值

v-model会忽略表单的初始值，比如：checked、value、selected，如果需要的话，应该在javascript中首先声明初始值

text
<div id="container">
    <h3 v-html="message"></h3>
    <input type="text" v-model="message">
</div>
<script>
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                message: "这是个表单内容",
            },
        })
    }
</script>
textarea
<div id="container">
    <h3 v-html="message"></h3>
    <textarea v-model="message"></textarea>
</div>
// 同上
checkbox
单个复选框：数据为绑定为true和false的布尔值
<div id="container">
    <h3 v-html="checked"></h3>
    <input type="checkbox" v-model="checked">
</div>
<script>
	window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                checked: true,
            },
        })
   }
</script>
多个复选框：选中的结果会绑定到同一个数组，将保存的v-model变量创建为数组
<div id="container">
    <h3 v-html="checked"></h3>
    <input name="fruit" type="checkbox" value="apple"  v-model="checked">苹果
    <input name="fruit" type="checkbox" value="banana" v-model="checked">香蕉
    <input name="fruit" type="checkbox" value="orange" v-model="checked">橘子
</div>
<script>
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                checked: new Array,
            },
        })
    }
</script>
radio
<div id="container">
    <h3 v-html="picked"></h3>
    <input type="radio" name="gender" value="junior" v-model="picked">男
    <input type="radio" name="gender" value="girl" v-model="picked">女
</div>
<script>
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                picked: "哈哈哈哈",
            },
        })
    }
</script>
select
<div id="container">
    <h3 v-html="selected"></h3>
    <select v-model="selected">
        <option disabled value="">你想去哪</option>
        <option value="山西">山西</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
    </select>
</div>
<script>
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                selected: "",
            },
        })
    }
</script>

selects

设置select标签的multiple属性即可设置为多选下拉菜单，按着ctrl键可以多选

<div id="container">
    <h3 v-html="selecteds"></h3>
    <select multiple v-model="selecteds">
        <option value="上衣">上衣</option>
        <option value="裤子">裤子</option>
        <option value="鞋">鞋</option>  
    </select>
</div>
<script>
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                selecteds: new Array, // 多重数据一般都要保存成数组
            },
        })
    }
</script>

修饰符

.lazy

默认情况下，v-model在input和textarea表单中进行同步输入框的改动

添加了.lazy修饰符之后，对应的v-model绑定事件触发机制将变为change事件，只有在光标失去焦点时会触发

<div id="container">
    <h3 v-html="message"></h3>
    <input type="text" v-model.lazy="message">
</div>
<script>
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                message: "这是个表单内容",
            },
        })
    }
</script>

.number

如果用户希望将输入表单的内容处理为Number类型，可以使用.number给v-model进行修饰；如果表单字符串无法被处理为数字，则返回原始的值

<div id="container">
    <h3 v-html="typeof message"></h3>
    <input type="text" v-model.number="message">
</div>
.trim
使用.trim可以自动过滤输入框的首尾空格

<div id="container">
    <input type="text" v-model.trim="message">
    <br>
    <input type="text" v-model="message">
    <!-- 通过查看另一个表单中同步的缩进 -->
</div>

动态绑定

当某些情况下，无法确定表单中所代表的属性值，可以使用v-bind进行动态绑定，v-model获取到的表单输入此时则是我们定义的v-bind属性值

<div id="container">
    <h3 v-html="message"></h3>
    <input type="radio" v-model="message" :value="choiceA"> A
    <input type="radio" v-model="message" :value="choiceB"> B
</div>
<script>
    window.onload = function () {
        var vm = new Vue({
            el: "#container",
            data: {
                message: "", // 表单绑定变量
                choiceA: "Yes!", // 属性绑定变量，未来不需要修改标签中的value值即可动态修改
                choiceB: "No!",

            },
        })
    }
</script>

计算属性

关键词：computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的

在模板中放入太多的逻辑会让模板过重且难以维护

也就是说，某些时候页面中的模板变量如果需要复杂的运算处理，应该使用计算属性，而不是直接在模板位置进行计算。

<script type="text/javascript">
    window.onload = function () {
            var vm = new Vue({
                el: "#container",
                data: {
                    String1:"这是一个字符串",
                },
                methods: {
                    MreverseString(){
                        return this.String1.split("").reverse().join("")
                    } // 定义一个函数进行字符串逆置
                },
                computed: {
                    CreverseString(){
                        return this.String1.split("").reverse().join("")
                    } // 定义一个计算属性进行字符串逆置
                }
            })
        }
</script>
<div v-cloak id="container">
    <p>这是一个字符串:{{ String1 }} </p>
    <p>他的逆置:{{ String1.split("").reverse().join("") }} </p>
    <p>他的逆置:{{ CreverseString }} </p>
    <!-- 计算属性直接写入函数名 -->
    <p>他的逆置:{{ MreverseString() }} </p>
    <!-- 普通methods函数调用需加括号 -->
</div>
注意：虽然计算属性和函数都可以达成同样的目的，但是computed会缓存结果，计算属性如果发现依赖的属性message未发生改变，再次访问计算属性不会重复运算函数，而是直接利用已有结果；如果依赖数据发生改动，计算属性函数才会重新运算。

在函数及计算属性中添加日志输出即可看到这个效果：

methods: {
    MreverseString() {
        console.log("MreverseString被运算了")
        return this.String1.split("").reverse().join("")
    }
},
computed: {
	CreverseString() {
		console.log("CreverseString被运算了")
		return this.String1.split("").reverse().join("")
	}
}
在终端下进行计算属性以及函数的访问即可看到效果。
计算属性SetAttr
默认的计算属性只有获取getattr的方式，我们可以手动为他添加一个setter

computed:{
    CreverseString: {
        get: function(){
            return this.String1.split("").reverse().join("")
        }
        set: function(val){
            this.String1 = val.split("").reverse().join("")
            // 如果当前的逆置之后字符串为val，那么原本的字符串需要再颠倒一次
        }
    }
}

侦听属性

侦听属性的作用是侦听某些属性的变化，从而做相应的操作，进行对数据变化的相应，

侦听属性是一个对象（字典），key值是要监听的元素，值是当监听的元素发生改变时要执行的函数；

监听函数有两个参数，一个是当前值，另一个是变化后的值

比如监听一个变量的变化
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data:{
                content: "", // 表单内容
                count: 0, // 记录表单内用户敲了多少次
            },
            watch:{
                content:function (oldVal,newVal){
                    // 只要在文本框输入内容影响到了age数据发生改变，就会触发
                    this.count += 1
                }，
            }，
        })
    }
</script>
<div id="container">
    <p><label>你敲了:{{ count }}次</label></p>
    <input type="text" placeholder="请输入你的年纪" v-model="content">
</div>

属性绑定

使用v-bind:class指令来设置元素的class属性；

属性表达式的类型可以是字符串、对象或数组

数组属性
可以通过为元素绑定一个数组，用来为元素设置单个或多个样式，类名在数组中用单引号

<style type="text/css">
    .fontBold {
        font-weight: bold;
    }
    .fontRed {
        color: red;
    }
</style>
<div id="container">
    <p :class="['fontBold','fontRed']">这是一个段落</p>
</div>
动态属性
可以通过为元素绑定一个对象，对象的key是样式类，对象的value是true或false来动态切换class

<script type="text/javascript">
    window.onload = function () {
        var vm = new Vue({
            el: "#container",
            data: {
                flag: true,
            },
            methods: {
                toggle() {
                    if (this.flag){ // 判断当前toggle变量的属性，对称变换
                        this.flag = false
                    }else{
                        this.flag = true
                    }
                }
            }
        })

        }
</script>
<div id="container">
    <p :class="{fontBold: flag}" @click="toggle">这是一个段落</p>
    <p :class="{flag? fontBold:''}" @click="toggle">这是一个段落</p>
    <!-- 三元表达式 -->
</div>

样式绑定

使用v-bind:style语法，为元素绑定样式

<p :style="{color:'red','font-weight':'bold'}">
    一段文字
</p>
也可以在vue的data中定义一个对象，用来描述样式，其中带有连字符的样式属性要加引号
<div id="container">
    <p :style="styleObj">一段文字</p>
</div>
data: {
	styleObj: {
		color:'red',
		'font-weight':'bold',
	}
},
data中的对象也可以通过数组类型绑定到元素上
<div id="container">
    <p :style="[styleObj1,styleObj2]">一段文字</p>
    <!-- 对于js的样式绑定不需要加引号，因为就是一个变量 -->
</div>
styleObj1: {
    border: '1px solid gray',
    width: '100px',
},
styleObj2:{
    background: 'black',
    color: 'blue',
}
条件渲染
通过条件指令可以控制元素的显示及隐藏，或者说叫做创建和销毁

v-if
v-if指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候渲染

<div v-cloak id="container">
    <h3 v-if="oh3">h3标题</h3>

    <p v-if="gender === 'girl'">你是女的</p>
    <p v-else-if="gender === 'boy'">你是男的</p>
    <p v-else>不男不女</p>
</div>
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data:{
                oh3:"a",
                gender: 'other'
            },

        })
    }
</script>
truthy和ture的区别：
隐含有true属性的变量不可以认为它是true，它不是boolean类型
v-show
与v-if不同的是，v-show 的元素始终会被渲染并保留在DOM中

v-show 只是简单地切换元素的CSS属性 display

<div v-cloak id="container">
    <h3 v-if="oh3">h3标题</h3>
    <h4 v-show="oh4">h4标题</h4>
</div>
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data:{
                oh3:"1", // v-if 在该变量不为真时直接消失在document中
                oh4:"1", // v-show 处理不为真的变量条件 绑定元素不会消失
            },

        })
    }
</script>

列表渲染

v-for
把一个数组对应为一组元素

用 v-for 指令根据一组数组的选项列表进行渲染

v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名

<ol id="container">
    <li v-for="user in users">
        <span>{{ user.name }}</span>
    </li>
</ol>
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data:{
                users: [
                    {name:"张三",age:18},
                    {name:"李四",age:20},
                    {name:"王五",age:19},
                ]
            },

        })
    }
</script>
v-for还可以支持将当前循环索引作为渲染时的第二个参数，第二个参数为访问索引位置
<p  v-for="(user,index) in users">
    {{ index }}:{{ user.age }}
</p>
data:{
    users: [
        {name:"张三",age:18},
        {name:"李四",age:20},
        {name:"王五",age:19},
    ]
},
使用v-for迭代访问一个对象
<p v-for="key in myself"> 
    {{ key }}
    <!-- 当v-for渲染时只有一个参数，此时参数为value值 -->
</p>
myself : {
    name:"赵六",
    age:"17",
}
v-for支持最多三个参数，同时获取遍历对象的key和value值，以及index索引位置
要注意的是，此时的key和value和python中的顺序是颠倒的，key在后，value在前

<p v-for="(value,key,index) in myself">
    {{ index }}: {{ key }} - {{ value }}
</p>
myself : {
    name:"孙七",
    age:"17",
}
v-for进行一段取值
<div>
    <p v-for="n in 8">
        {{ n }}
    </p>
    <!-- 1 2 3 4 5 6 7 8 -->
</div>

选项卡练习

<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                choicId: null,
            }
        })
    }
</script>
<style>
    li{
        list-style-type: none;
        border: 3px outset lightgreen;
        width: 100px;
        background:lightblue;
        margin:5px;
    }
    li:hover{
        border: 3px inset gray;
        cursor: pointer;
    }
    [v-cloak]{
        display: none;
    }
</style>
<div v-cloak id="container">   
    <ol list>
        <li @click="choicId = 1">A</li>
        <li @click="choicId = 2">B</li>
        <li @click="choicId = 3">C</li>
        <li @click="choicId = 4">D</li>
    </ol>
    <p v-show="choicId == 1">aaaaaaaaaa</p>
    <p v-show="choicId == 2">bbbbbbbbbb</p>
    <p v-show="choicId == 3">cccccccccc</p>
    <p v-show="choicId == 4">dddddddddd</p>
</div>
js中两个等号和三个等号的区别：
==表示： 如果两边值的类型不同的时候，是要先先进行类型转换后，才能做比较；equality等同

==表示：不需要做类型转换，如果两边值的类型不同，就表示一定是不等的identity恒等

注意

Vue无法检测到对于数组的索引设置及长度修改以及对于对象属性的删除或添加

但是可以通过以下方式进行属性添加触发状态更新

Vue.set($vm.Object,"key","val") // 对于对象 这样的添加方式可以触发状态更新
Vue.set($vm.Array, index, newVal) // 对于数组 添加元素 触发状态更新
// vm.items.splice(newLength) // 设置数组长度
javascript.splice(where, num, [additem1,additem2...] )：删除或添加元素
此外，当v-for与v-if同时使用时，v-for有更高的优先级，这会造成重复遍历得到的元素都要在做一次v-if的判断，如果我们是为了有目的判断当前是否需要渲染这个元素，或是跳过这个循环，可以将v-if放在外层元素，比如template标签中，(template标签无实际意义，默认不展示，但是可以起到包裹作用)

过滤器

Vue.js允许你自定义过滤器，可被用于一些常见的文本，对它们进行格式化

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)

过滤器应该被添加在JavaScript表达式的尾部，由管道符号指示

语法
<p>
    {{ message | filter }}
</p>

<p v-bind:type="message | filter"> </p>
过滤器本质上是一个函数，比如我们定义一个将表单输入的内容中所有的字母变大写的过滤器
<body>
    <div v-cloak id="container">
        <input type="text" v-model="message">
        <p>展示: {{ message | toUpper }}</p>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        var vm = new Vue({
            el: "#container",
            data: {
                message: "",
            },
            filters: {
                toUpper: function (value) {
                    if (!value) return '' // 字符串内容为空 直接返回
                    console.log("正在变大小")
                    return String(value).toUpperCase()
                }
            }
        })
    }
</script>
过滤器函数也可以有多个参数
{{ message | filter(arg1, arg2) }}
// message 第一个参数
// arg1 第二个参数
// arg2 第三个参数
<div v-cloak id="container">
    <input type="text" v-model="message">
    <p>展示: {{ message | toLong("| "," |") }}</p>
</div>
filters: {
    toLong(value,arg1,arg2){
        if (!value) return ''
        return arg1 + value + arg2
    }
}

Vue实例生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程

例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等

同时在这个过程中会自动运行一些叫做生命周期钩子的函数，我们可以使用这些函数，在实例的不同阶段加上我们需要的代码，实现特定的功能

beforeCreate：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created：数据已经绑定到了对象实例，但是还没有挂载对象
beforeMount：模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的$el属性
$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

mounted： 将$el的内容挂载到了el，相当于我们在jQuery执行了$(el).html($el)，生成页面上真正的dom
上面我们就会发现页面的元素和我们$el的元素是一致的；在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作

beforeUpdate：数据发生变化时调用
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy：Vue实例销毁前
destroyed：Vue实例销毁后
window.$vm.$destroy()

一大段代码进行钩子函数的调用过程监控
<script type="text/javascript">
    window.onload = function () {
    function showData(process, vm) {
        console.log(process)
        console.log("vue数据:", vm.message) // 当前Vue中的数据
        console.log("Vue挂载el:") // Vue接管的元素
        console.log(vm.$el) 
        console.log("真实Dom:")
        console.log(document.getElementById("container").innerHTML)
        console.log('-----------------')
    } // 这个函数用来输出相关信息的
    new Vue({
        el: "#container",
        data: {
            message: "aaaaa",
        },
        beforeCreate: function () {
            showData("创建Vue实例前", this)
        },
        created: function () {
            showData("创建Vue实例后", this)
        },
        beforeMount: function () {
            showData("挂载到Dom前", this)
        },
        mounted: function () {
            showData("挂载到Dom后", this)
        },
        beforeUpdate: function () {
            showData("数据发生变化时", this)
        },
        updated: function () {
            showData("数据发生变化后", this)
        },
        beforeDestroy: function () {
            showData("Vue实例销毁前", this)
        },
        destroyed: function () {
            showData("Vue实例销毁后", this)
        }
    })
}
</script>
<div id="container">
    <p v-html="message"></p>
</div>

组件

ES6语法
ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法

ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的

变量声明
let：定义封闭作用域的变量，并且变量只能声明一次
const：定义封闭作用域的常量，并且变量只能声明一次
let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字

这两个关键字和var的区别是，它们声明的变量没有预解析，无法脱离定义空间使用

let和const的区别是，let声明的是一般变量，const申明的常量，不可修改

console.log(a) // undefined
console.log(b) // b is not defined
console.log(c) // c is not defined
var a =  1
var a = 2
let b = 2
// let b = 3 // Identifier 'b' has already been declared
const c = 3
// const c = 4 // Identifier 'c' has already been declared
c = 4 //  Assignment to constant variable

箭头函数

可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this

解决了JavaScript中this指定混乱的问题

定义函数的一般方式
function func(){
    ...
}
匿名赋值创建函数
var func = function(){
    ...
}
箭头函数的写法
var func = (a, b) => {
    // 这样的函数在嵌套时，会自动绑定外部作用域下的this
}
var func = a => {
    // 一个参数时，可以省略参数
}
window.onload = function () {
    var vm = new Vue({
        el: "#container",
        data: { message: "abcdef", },
        methods: {
            show() {
                console.log("这是show函数:", this.message),
                    func = () => {
                    console.log("我是内部函数:", this.message)
                },
                    func(), // 调用一下这个内部函数
            }
        }
    })
}
<div id="container">
    <button @click="show">按钮</button>
</div>

Vue组件

组件Component是Vue.js最强大的功能之一

组件可以扩展HTML元素，封装可重用的代码

所有的Vue组件同时也都是Vue的实例，所以可接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子

注册全局组件
注册一个全局组件语法格式如下
Vue.component(tagName, options)
// tagName：组件名
// options：配置选项
比如这样一个全局组件
Vue.component('button_show', {
    data: function () {
        return {
            count: 0
        }
    }, // 当前组件会需要的数据，定义为函数的返回值
    template: '<button @click="count++">按钮:{{ count }}</button>'
    // 组件的标签模板
})
接下来可以在任何Vue接管的元素中使用该组件，
<div id="container">
    <button_show></button_show>
</div>
window.onload = function () {
    var vm = new Vue({
    	el: "#container",
    })
}


data必须是函数
组件就是vue的实例，所有vue实例中属性和方法，组件中也可以用

其中data属性必须是一个函数，因为组件会重复使用在多个地方，为了使用在多个地方的组件数据相对独立，data属性需要用一个函数的返回值来将数据处理为不同的每个个体


Prop传递数据
Prop是你可以在组件上注册的一些自定义特性

当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性

为了给组件传递数据，我们可以用一个 props 选项将一些特性值列举在其中

<script type="text/javascript">
    Vue.component("myp",{
        props: ["content","like"], // 需要两个外界传入的值
        template: "<p :class='like'>{{ content }}</p>"
        // 组件绑定未来要接受的变量，要用到v:bind
    })
    window.onload = function(){
        var vm = new Vue({
            el: "#container",
            data: {
                content: '这是p段落的文本',
                like: 'beauty', // 要传递的变量
            }
        })
    }
</script>
.beauty{
    width: 100px;
    color: red;
    background: green;
}
<div id="container">
    <myp :like="like" :content="content"></myp>
    <!-- 传递到组件中 -->
</div>

VUE的安装指令

vue 安装脚手架
安装 npm

查看npm版本号

npm -v
安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
将cnpm和npm添加到环境变量中，供全局使用

查看版本

cnpm -v
安装vue

cnpm install vue
初始化项目

vue init webpack 项目名称
切入项目 cd 项目名称

cnpm install
完成安装