Vue 学习一

Vue 两大核心：数据驱动(MVVM)和组件
Vue 两大核心：数据驱动(MVVM)和组件
Vue 两大核心：数据驱动(MVVM)和组件

1》创建vue实例

640.png

2》vue实例的4个常用选项

过滤器filters(小数过滤成整数)、计算属性computed(对数据进行计算)、方法methods(给元素挂载方法 v-on:click)、观察watch(观察数据变化)。
注：computed 和methods区别：
当要计算只会执行一次时，则用computed，因为计算的结果会保存在vue缓存里，只要计算的值没有发生变化，那么第二次调用时，则不会在次计算，而是到vue缓存里去取。反之，methods不算值有没有变化，只要调用计算方法，则每次都会执行。methods和watch方法是可以传参的，computed是不能传参的。

3》vue实例生命周期

640.jpg

4》vue在html中绑定数据

a.Mustache 语法:

什么叫Mustache语法，别被这高大上的叫法吓到了，其实就是双大括号{{ }}的写法。

b.绑定纯html：

有时候有一种这样的需求，我们的数据包含了一些html的标签代码，比如： name:"<strong>这是包含标签的数据</strong>"，用原来的双大括号{{ }}方式，就不能满足了，它会渲染成这样：<strong>这是包含标签的数据</strong>，你需要用vue提供的v-html指令：“<div id="app" v-html="name"></div>
”才会显示“这是包含标签的数据”。

c.绑定属性:

前面两个都是控制视图展示文本内容，有时候，html标签的属性也很重要，比如：<a>标签的href属性，<img/>标签的src属性等。Vue中如何将data中的数据绑定为这些属性的值呢？我们用v-bind指令:<a v-bind:href="link">hello官网</a>
注：v-bind有个缩写 <a :href="link">hello官网</a> 这样也行.

  d.支持javascript表达式
<div id="app">{{name + 1}}</div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: 2
            }
        })
    </script>
name = 3;

5》必须掌握的10个指令

1. v-text
   指令用于更新标签包含的文本，它的作用跟双大括号的效果一样，<p v-text="msg"></p> 等于 <p>{{msg}}</p>。

<!-- v-text 指令 -->
    <div id="app">
        <p v-text="msg"></p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg : "123"
            }
        });
    </script>

2. v-html
   指令用于要绑定的数据有html标签,如:msg:'<b>hello,vue</b>'， 而直接渲染会把标签显示出来，要用v-html=msg来渲染才会渲染hello,vue并用b标签包含。

<!-- v-html  指令-->
    <div id="app" v-html="msg"></div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg : "<p>www</p>"
            }
        });
    </script>

3. v-show
   指令用于控制元素的display css属性的,值为true和false来显示/隐藏。

<!-- v-show 指令 -->
    <div id="app">
        <p v-show="show" v-text="msg"></p>
        <p v-show="hide" v-text="msg1"></p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                show : true,
                hide : false,
                msg : "123",
                msg1 : "456"
            }
        });
    </script>

4. v-if
   指令用于控制元素是否需要被“渲染”出来，取值也是为true或false。
   v-show 和 v-if 都能控制元素显示或者隐藏，这两个怎么区别使用呢？
   记住一点：如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。

5. v-else
   if和else在编程语言一般都是结对出现的，在vue里面也不例外。它没有对应的值，但是要求前一个兄弟节点必须要使用 v-if 指令，也对，没有if，哪来的else。

<!-- v-if v-else 指令 -->
    <div id="app">
        <p v-if="hide">111</p>
        <p v-else>222</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                hide : true
            }
        });
    </script>

6. v-for
   有时候，我们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染。

提醒：v-for指令除了可以迭代数组，还可以迭代对象和整数。

<!-- v-for 指令 -->
    <div id="app">
        <div v-for = "(itme,index) in list">{{ itme }}.{{ index }}</div>
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                list : [1,2,3]
            }
        });
    </script>

7. v-bind
   用于动态绑定DOM元素的属性，比较常见的比如：<a>标签的href属性，<img/>标签的src属性。

<!-- v-bind 指令 -->
    <!-- <a id="app" v-bind:href = "link" v-text = "msg"></a> -->
    <!-- 简写   v-bind去掉，只用:就行   v-bind:href = "link" 简写 :href = "link" -->
    <a id="app" :href = "link" v-text = "msg"></a>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                link : "www.ha123.com",
                msg : "好123"
            }
        });
    </script>

8. v-on
   用于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。

<!-- v-on 指令 -->
    <div id="app">
        <p v-on:click = "btnClick('Tom')" v-text = "msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "事件v-on"
            },
            methods : {
                btnClick(name){

                    if(this.msg == "123Tom"){
                        return this.msg = "事件v-on" + name;
                    }
                    // alert(1);
                    return this.msg = "123" + name
                }
            }
        });
    </script>

9. v-model
   这是一个最重要最常用的指令，一般用在表单输入，它帮助我们轻易地实现表单控件和数据的双向绑定，相对以前的手动更新DOM，简直就是开发者的福音。

<!-- v-model 指令 -->
    <div id="app">
        <input v-model = "msg" type="text">
        <p>你好:{{ msg }}</p>
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : ""
            }
        });
    </script>

是不是比你手动更新DOM爽多了，是不是感受到了vue的MVVM带来的快感？

10. v-once
    它的特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

<!-- v-once 指令 -->
    <div id="app">
        <input v-model = "msg" type="text">
        <p v-once>你好:{{ msg }}</p>
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "这时设置值了，那怕通过v-model修改内容也不会渲染了"
            }
        });
    </script>