【转】vue入门1

作者：datura_lj
链接：https://www.jianshu.com/p/98b8a8fb00e6
來源：简书
https://www.jianshu.com/p/dc5057e7ad0d

一：Vue实例

每一个应用都是通过Vue这个构造函数创建根实例（root instance）启动New Vue（选项对象）。需要传入选项对象，对象包含挂载元素，数据，模板、方法等。
el：挂载元素选择器 --- String|HtmlElement
data：代理数据 --- Object|Function
methods：定义方法 --- Object
Vue代理data数据，每个vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。
Vue实例自身属性和方法，暴露自身的属性和方法,以“$”开头的，例如：$el、$data。。。

var vm = new Vue({
       el: '#app',
       data: {
          message: 'hello,Datura!!!'
        }，
        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实例中定以，在利用“{{ xxx }}”模板中展示。具体怎么过去的我们不关注

四、Vue指令

什么是指令：
是一种特殊的自定义行间属性（也就是在html标签内写）；指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上，在Vue中，指令以“v-”开头

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>
原生的html：双大括号输出的文本，不会解析html标签。也就是说当实例的data为html标签时，不能解析而是直接输出出来。此时如想要解析，可使用v-html="value"代替。

new Vue({
    data:{
        value: `<span>我是一个span标签</span>`
    }
});
<p>{{ value }}<p>   页面展示  =>  <span>我是一个span标签</span> 
<p v-html="value"><p>   页面展示  =>  我是一个span标签

需要注意的是，有时候因为一些网络延迟等原因，用户会在也买年中先看到{{ xxx }}，然后才有数据。我们若想避免此效果，可用v-text="xxxx"代替。
属性：使用v-bind进行绑定，可以响应变化。
<h2 :class="{red:show}">标题</h2> => 注意此处的show为data内的一个布尔值数据，若真则添加red的class，若假则移除red的class，