“Vue2.0”跟俺一起全面入坑 01

补充一个关于console知识点

1. console.dir()可以现实一个对象所有的属性和方法
   例如console.dir(document);就可以查看(document树)下所有的东西。

2. 测试一段代码执行时间：

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出来的）实例上的属性

三、声明式渲染

1. 声明式

只要声明在哪里(where)做什么(what),而无需关心如何实现(how)

2. 命令式

需要具体代码表达在哪里（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
})

3. 声明式渲染

初始化根实例，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模版

1. html模版

HTML模版：基于DOM的模版，模版都是可解析的有效的html

插值

文本：使用“Mustache”语法（大括号）{{value}};

作用：替换实例上的属性值，当值改变时，插值内容会被自动更新。也可以使用 v-text="value"代替

<p>{{value}}</p>等价于<p v-text="value"></p>