vue学习01

vue学习01

 

 


1. 创建一个Vue实例
官网-学习-教程-安装-（开发/生产版本）-与jQuery的引用相似

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- v-on处理click事件 -->
            <!-- v-on:可以简写为@ -->
            <!-- v-bind 绑定数据，将title与data中title绑定 -->
            <!-- v-bind:可以简写为为 ： -->
            <div :title="title" @click="handClick">{{msg}}</div>
            <!-- v-model:用来进行双向数据绑定 -->
            <input v-model:value="content"/>
            <div>{{content}}</div>
            姓：<input v-model:value="firstName"/>
            名：<input v-model:value="lastName"/>
            <div>{{fullName}}</div>
            <div>{{count}}</div>
            <div v-if="show">你可以看到我吗</div>
            <button @click="handleShow">试试看喽</button>
            <!-- 循环展示 -->
            <ul>
                <!-- <li v-for="item of list">{{item}}</li> -->
                <!-- 加入key值，增强渲染效果，index表示的是下标，所以每一个index都是不一样的 -->
                <li v-for="(item,index) of list":key="index">{{item}}</li>
            </ul>
        </div>
        <script>
            /* 创建Vue实例  接管ID为root的元素*/
            new Vue({
                el:"#root",
                data:{
                    msg:"hello world",
                    title:"this is hello world",
                    content:"双向数据绑定",
                    firstName:'',
                    lastName:'',
                    count:0,
                    show:true,
                    list:[1,2,3,4]
                },
                // 计算属性：如果之前的计算内容没有改变，那么fullName就会显示上一次缓存的值，直到firstName或者lastName改变
                computed:{
                    fullName: function(){
                       return this.firstName+" "+this.lastName;
                    }
                },
                methods:{
                    handClick:function(){
                        // alert('123');
                        this.msg="666";
                    },
                    handleShow:function(){
                        this.show=!this.show;
                    }
                },
                // 侦听器
                watch: {
                    // firstName:function(){
                    //     this.count++;
                    // },
                    // lastName:function(){
                    //     this.count++;
                    // }
                    fullName:function(){
                        this.count++;
                    }
                }
            
            });
        </script>
    </body>
</html>
复制代码

2. 挂载点、模板、实例之间的关系
　挂载点：div标签 对应el属性
   模板：挂载点之内的内容，也可以写在实例的template属性里面
3. {{xxx}} 叫做插值表达式
   属性的绑定
   {{number}} 与 v-text="number"效果是一样的
   v-html 会进行转义，可以输出HTML格式的内容。
   v-on:click="hanleClick"
4. 只要是在模板里面使用了模板指令（v-on、@、v-bind），等号 后面就不再是字符串了，而是一个js的表达式
5. 双向数据绑定：
    既可以通过数据来修改模板中的内容，又可以通过修改模板中 的内容来修改数据中的内容。
    v-model
6. Vue中的计算属性和侦听器
7. v-if、v-show、v-for
    如果v-if为false的话，会将v-if所在的标签从DOM树里面删除
    如果v-show为false的，会将该标签的显示属性设置为display: none;

posted @ 2018-12-13 16:53  ~雨落忧伤~  阅读(61)  评论(0)    收藏  举报