“Vue2.0”跟俺一起全面入坑 01
补充一个关于console知识点
console.dir()可以现实一个对象所有的属性和方法
例如console.dir(document);就可以查看(document树)下所有的东西。测试一段代码执行时间：
console.time('test');
/* 这里运行待测代码 */
console.timeEnd('test');
前言：Vue主要是“面向数据”编程。当数据发生改变时，使用虚拟DOM来改变某一DOM节点，避免将整个页面渲染
一、第一个Vue（读音：view）
首先在在Vue官网下载vue.js文件。
/*html 代码层 view层，模版*/
<div id="app">
{{message}}
</div>
/* 引入相关文件，然创建实例，在实例中写各种方法就ok了 */
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function()){
let data={
messgae:'hello vue'
}
//vm实例
var vm=new Vue({
el:'#app',///挂在元素
data:data
});
},false);
</script>
Vue特殊= 数据双向绑定 ：数据模型(model)与视图(view)组件的自动同步
涉及到的知识点：指令v-model=""
<div id="app">
<input type="text" placeholder="请输入" v-model="message"/> /* 将message绑定到当前元素并监听其变化 */
<br>
<p>数据：{{message}}</p>
</div>
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var vm = new Vue({
el: '#app',
data: {
message: 'hello,Datura!!!'
}
});
},false);
</script>
二、Vue实例
Vue实例，每个应用都是通过Vue这个构造函数创建根实例(root instance) 启动new Vue(选项对象)。需要传入选项对象，对象包含挂载元素，数据，模版，方法等。
| Code | Name | Type | Applied |
|---|---|---|---|
| el: | 挂在元素选择器 | String | HtmlElement |
| data: | 代理数据 | Object | Function |
| methods: | 定义方法 | Object |
Vue代理data数据，每个Vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。
Vue实例自身属性和方法，暴露自身的属性和方法，以$开头的，例如$el \ $data
var vm =new Vue({
el:'#app',
data:{
message:'hello Renny!!!'
},
methods:{
test(){
alert(1);
},
compontents:{
//这里存放组件
}
}
})；
/*vm就是new出来的实例*/
console.log(vm.$data);//也就是数据data，后面还有很多挂载在vm（new出来的）实例上的属性
三、声明式渲染
- 声明式
只要声明在哪里(where)做什么(what),而无需关心如何实现(how)
- 命令式
需要具体代码表达在哪里（where）做什么(what)，如何实现(how)
例子：求数组中每一项的倍数
命令式：使用for循环拿出每一项，然后计算完成后，再放到另一个数中
//定义一个新的空数组，然后利用for循环，每一步每一步的放入其中
var arrNew=[];
for(var i=0;i<arr.length;i++)
{
arrNew.push(arr[i]*2);
}
声明式：使用es6的map方法，关注如何取值
//将原数组(arr)中利用map函数，传入每一项
var arrNew=arr.map(function(item){
return item*2
})
- 声明式渲染
初始化根实例，Vue自动将数据绑定在DOM模版上
所以可以看出数据在Vue实例中定义，再利用"{{xxxx}}"模版中展示。具体怎么过去的我们不关注
四、Vue指令
什么是指令：
是一种特殊的自定义行间属性(也就是在html标签内写)；指令的职责就是当其表达式的值改变时相应的将某些行为应用到DOM上，在VUE中，指令以v-开头
Vue中的内置指令： 点击查看更多
v-on:
| Name | Comment |
|---|---|
| v-bind: | 动态绑定数据。简写为":"。=>以后的:class="{red:boolean}" |
| v-on: | 绑定时间监听器。简写为“@”，例：@click="xxx"； |
| v-text: | 更新数据，会覆盖已有结构。类似{{msg}}； |
| v-show: | 根据值的真假，切换元素的display属性； |
| v-if: | 根据值的真假，切换元素会被销毁、重建；=>在DOM中已经消失 |
| v-else-if: | 多条件判断，为真则渲染； |
| v-else: | 条件都不符合时渲染； |
| v-for: | 基于元数据多次渲染元素或模块； |
| v-model: | 在表单空间元素(input等)上创建双向数据绑定(元数据)； |
| v-pre: | 跳过元素和子元素的编译过程； |
| v-once: | 只渲染一次，随后数据更新也不重新渲染； |
| v-cloak: | 隐藏未编译的Mustache语法，在css中设置[v-cloak]{display:none;} |
五、Vue模版
- html模版
HTML模版：基于DOM的模版，模版都是可解析的有效的html
插值
文本：使用“Mustache”语法（大括号）{{value}};
作用：替换实例上的属性值，当值改变时，插值内容会被自动更新。也可以使用 v-text="value"代替
<p>{{value}}</p>等价于<p v-text="value"></p>
