读vue-js实战前两章

读Vue-js实战

实例与数据绑定

• 通过构造函数Vue就可以创建一个Vue的根实例；
• el用于指定页面中已存在的DOM元素来挂载Vue实例；
• 建议所有会用到的数据都预先在data中声明，这样不至于将数据落在业务逻辑中，难以维护；
• Vue实例本身也代理了data对象的所有属性；

var app = new Vue({
    el:"#app",
    data:{
    a:2
    }
})
console.log(app.a);//2

• 除了显示地声明数据外，也可以指定一个已有的变量，并且他们之间默认建立了双向绑定，修改任意一个，另一个会一起变化；

var myData = {
      a:1
}
var app = new Vue({
    el:"#app",
    data:myData
})
console.log(app.a);//1
app.a = 2;
console.log(myData.a);//2
myData.a = 3;
console.log(app.a);//3

生命周期

• created实例创建完成后调用，此阶段完成数据观测，但尚未挂载，$el还不能用
• mounted[‘maʊntɪd el挂载到实例后调用，业务逻辑在这里开始
• beforeDestroy[dɪˈstrɔɪ] 实例销毁前调用。主要解绑一些使用addEventListener监听的事件
• 这些钩子与el和data类似，也是作为选项写入Vue实例内，并且this的指向是调用它的Vue实例

var app = new Vue({
    el:"#app",
    data:{
       a:2
    },
    created:function(){
         console.log(a)//2
    },
    mounted:function(){
        console.log(this.$el)//<div id="app"></div>
    }
})

插值与表达式

• Mustache[mə’stɑ:ʃ] “{{}}” 最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如：

<div id="app">
    {{ book }}
</div>
var app = new Vue({
    el:"#app",
    data:{
      book:'Vue.js实战'
    }
})

过滤器filters[filtəs]

• 过滤器是在{{}}插值尾部添加一个管道符号 | 对数据进行过滤
• 过滤器可以串联{{ data | filtersA | filtersB}}
• 过滤器可以接收参数{{ data | filtersA(‘argA’,’argB’) }}分别传给第二个跟第三个参数，因为第一个是数据本身；

指令跟事件

• v-if 如v-if = show
• v-bind 主要用来动态跟新HTML元素上的属性比如id,calss等；
• v-on它用来绑定事件监听器

<div id="app">
    <p v-if="show">这是一段代码</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{
            handleClose: function () {
                this.show = false;
            }
        }
    })
</script>

• 以上是v-on:click绑定了一个click事件，也可以绑定其他的事件比如dblclick、keyup、mousemove等，这些方法都写在Vue实例的methods属性内；
• 表达式除了方法名外还可以使用内联语句如： 点击隐藏,如果复杂业务逻辑不要用此方法；
• 业务逻辑中的两种调用方法

  var app = new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{
            init: function (text) {
                console.log(text);
            }
        },
        mounted:function () {
            this.init("在初始化后调用");
        }
    });
    app.init("通过外部调用");

语法糖

• vue.js中v-bind和v-on都提供了语法糖
• v-bind 简写 冒号‘：’
• v-on 简写成 @