VUE框架的初识

  1. 初步了解Vue.js框架(渐进式前端框架)

    Vue.js是一种轻量级的前端MVVM框架。同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点。是一套构建用户界面的渐进式框架,以数据驱动DOM,Vue 采用自底向上增量开发的设计。

    // vue配套的一些插件
    Vue Router 全局路由
    Vuex       组件与组件间通信
    Vue Cookie cookie的管理


    // 使用Vue
    导入 ==> 创建Vue对象 ==> 挂载到指定的页面标签(如果操作整个页面,可将整个页面用一个标签嵌套)

    示例:
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '.wrapper'  // 只能控制检索到的第一个class为wrapper的页面结构
        })
     </script>

    // 注意:由于挂载点与对象是一一对应的关系,所以在挂载点应该采用id来做挂载点标识,不应该用class。

  2. Vue对象

    vue 对象的属性有:

    el: 挂载点,与页面建立联系

    data:属性数据,控制挂载点属性,向页面提供数据

    methods:方法,控制挂载点的事件

    computed:计算属性,监听方法内部属性的改变

    watch:监听属性,监听外部方法对应的属性的改变

    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                msg: '12345',
                info: '上山打老虎'
            }
        });
        console.log(vue.$data.msg);
        console.log(vue.msg);
    </script>

    vue.$data.msg与vue.msg的区别?

    一个被Vue对象控制的页面结构就称之为一个组件。
    组件与控制该组件的Vue对象是一一对应的关系,vue.$data.msg对象的属性,vue.msg则是组件中的。?

    对象的属性具体用法实例

    <div id="app">
        <p>
            <input type="text" v-model="firstName">
        </p>
        <p>
            <input type="text" v-model="lastName">
        </p>
        <input type="text" v-model="aaa"><!--姓名 = firstName + " " + lastName-->
        <h2>{{ firstName + " " + lastName }}</h2><!-- 将姓名替换为 firstName + " " + lastName -->
        <!--<h2>{{ fullName() }}</h2>-->
        <h2>{{ fullName }}</h2>
    </div>
    </body><script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                aaa: '',
                firstName: '',
                lastName: '',
                // fullName: '姓名'
            },
            // methods: {
            //     fullName: function () {
            //         return this.firstName + " " + this.lastName
            //     }
            // }
    // 一个属性变量的值依赖于多个属性变量的值
            // 特殊点: data绑定的属性值是固定的, computed绑定的属性值是动态的(函数的返回值)
            computed: {
                fullName: function () {
                    this.aaa;
                    console.log("监听到内部拥有的变量在改变");
                    if (this.firstName || this.lastName) {
                        return this.firstName + " " + this.lastName
                    }
                    return "姓名"
                }
            },
            
            watch: {
                // 为fullName该属性绑定了一个监听事件
                // fullName的定义还是在data或computed
                // fullName属性值一旦改变,绑定的监听事件就会被调用执行
    // 多个变量依赖于一个变量
                fullName: function () {
                    console.log("该方法被调用了");
    ​
                    f_l_arr = this.fullName.split(" ");
    ​
                    this.firstName = f_l_arr[0];
                    this.lastName = f_l_arr[1];
                }
            }
        });

    computed和watch的区别:computed是监听方法内部属性变量的改变,然后影响外部的属性变量的改变,实现属性的动态的属性值。watch则是监听对应的变量的属性值是否改变。

  3. Vue中的指令

    vue 中指令的表示方法   V-指令

    指令的类别:

    文本指令: v-text  v-html  v-once  插值表达式  {{ }}

    <p v-text="txt"></p>
    <p v-html="hml"></p>
    ​
    ​
    <p>{{ num + 1 }}</p>
    <p>{{ num + "12345" }}</p>
    <p>{{ num / 5 }}</p>
    <p>{{ num + msg }}</p>
    ​
    ​
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "vue的变量",
                txt: "vue的text指令",
                hml: "<b>vue的html指令</b>",
                num: 1000
            }
        });
    </script>
    ​
    v-text   纯文本指令
    v-html="hml"   解析HTML格式的文本  指令
    v-once    数据一旦渲染就不能改变
    插值表达式  {{ num }}   获取数据,类似于引用文本

     

   ​ 事件指令:v-on:事件名  简写  @事件名

   ​                       -- v-on="事件绑定的变量名"  

   ​        -- :事件名  来设置事件触发的条件 

   ​        -- 整体语法: v-on:事件名="事件绑定的变量名"
   ​                       -- 事件绑定的变量名 由 methods来提供具体的方法实现

在事件指令中,变量名后可以给参数, 例如:

@click='btnClick($event, 自定义参数们)

   所以在使用事件指令的更能灵活的实现不同布局切换和数据的调用

  
<div id="app">
       <p v-on:click="action1" v-text="msg1"></p>
       <p v-on:dblclick="action2" v-text="msg2"></p>
       <p @mouseenter="action3" v-text="msg3" style="background: red"></p>
   </div>
   
   
   <script src="js/vue.js"></script>
   <script>
       var vue = new Vue({
           el: '#app',
           data: {
               msg1: "点击事件",
               msg2: "双击事件",
               msg3: "鼠标悬浮事件",
           },
           methods: {
               action1: function () {
                   alert("天楚狂")
               },
               action2: function () {
                   alert("地楚狂")
               },
               action3: function () {
                   alert("人楚狂")
               },
           }
       });
   </script>

 

   ​      属性指令:  v-bind:属性名         简写   :属性名

   ​                          -- v-bind="属性绑定的变量名"
   ​                          -- :属性名  来设置事件触发的条件  (style | class | 自定义属性)
   ​                          -- 整体语法: v-bind:属性名="属性绑定的变量名"
   ​                          -- 属性绑定的变量名 由 data来提供具体的方法实现

  
<div id="app">
       <!-- 自定义的属性 -->
       <p v-bind:owen="tag">{{ msg }}</p>
   
       <!--<a href="/static/article/{{ article.id }}"></a>-->
       <a :href="url"></a>
       <!--<a :href="'/add_article/' + abc"></a>-->
       <a :href="'/static/article/' + aid">前往{{ aid }}篇文章</a>
   
       <button @click="btnClick">获取第100篇文章的id</button>
   </div>
   </body>
   
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               msg: "属性指令",
               tag: 1,
               url: '/static/article/1',
               aid: 10
           },
           methods: {
               btnClick: function () {
                   // this.$data.aid = 100;
                   this.aid = 100;
               }
           }
       });
   </script>

// 例子中利用了事件指令和属性指令的结合,实现了数据的改变

 

   ​         表单指令:   文本指令不需要绑定东西: v-text="变量名"
   ​                               属性指令需要绑定属性: v-bind:属性名="变量名"  => :属性名="变量名"
   ​                               事件指令需要绑定事件: v-on:事件名="变量名"  => @事件名="变量名"
   ​                                表单指令需要绑定表单元素的value: v-model:value="变量名" => 只对value进行绑定,
   ​                                 -- 所以直接书写 v-model="变量名"

  
<body>
   <div id="app">
       <input type="text" value="初始value" v-model="msg">
       <input type="text" value="初始value" v-model="msg">
       <p>{{ msg }}</p>
   
       <!-- v-model针对于表单元素 -->
       <form action="" method="get">
           <!-- 1、双向绑定:服务于文本输入框 -->
           <!-- v-model存储的值为输入框的value值 -->
           <div>
               <input type="text" name="usr" v-model="in_val">
               <input type="password" name="ps" v-model="in_val" >
               <textarea name="info" v-model="in_val"></textarea>
           </div>
   
           <!-- 2、单选框 -->
           <div>
               <!-- 单选框是以name进行分组,同组中只能发生单选 -->
               <!-- v-model存储的值为单选框的value值 -->
               男:<input type="radio" name="sex" value="male" v-model="ra_val">
               女:<input type="radio" name="sex" value="female" v-model="ra_val">
               <p>{{ ra_val }}</p>
           </div>
   
           <!-- 3、单一复选框 -->
           <!-- v-model存储的值为true|false -->
           <!-- 或者为自定义替换的值 -->
           <div>
               <input name="sure" type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
               {{ sin_val }}
           </div>
   
           <!-- 4、多复选框 -->
           <!-- v-model存储的值为存储值多复选框value的数组 -->
           <div>
               <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
               <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
               <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
               {{ more_val }}
           </div>
   
           <input type="submit" value="提交">
       </form>
   
   </div>
   </body>
   
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               info: "一次性数据",
               msg: "改变后的value",
               in_val: '',
            // 默认值可以决定单选框默认选项
            ra_val: 'male',
            // 默认值为true,单一复选框为选中,反之false为不选中
            sin_val: '',
            // 数组中存在的值对应的复选框默认为选中状态
            more_val: ['喜好女的','不挑']
           },
           methods: {
               
           }
       });
   </script>

 

 

   ​         条件指令: v-show | v-if v-else-if v-else

   v-if 在消失的时候不会被渲染, v-show会以   display:none 渲染页面

  
<style>
           p {
               width: 200px;
               height: 200px;
               background: orange;
           }
   
           [v-cloak] { display: none; }
   
   
           div {
               width: 400px;
               height: 100px;
           }
   
           .red { background-color: red; }
           .yellow { background-color: yellow; }
           .green { background-color: green; }
   
       </style>
   
   
   <div id="app" v-cloak>
       <!--
       条件指令:
       v-if
       v-show
       -->
       <button @click="btnClick">切换</button>
       <!-- v-if在消失的时候,不会被渲染, 而v-show以display: none;进行渲染 -->
       <p v-if="is_open"></p>
       <p v-show="is_open"></p>
   
       <hr>
       <!-- 事件绑定函数, 可以加括号(), 一旦加()就代表要传入参数, 系统就不再传入事件参数 -->
       <!--如果想传入事件参数, 1:不加括号  2.加括号需用$event-->
       <button @click="changeColor('red', $event)"></button>
       <button @click="changeColor('yellow')"></button>
       <button @click="changeColor('green')">绿</button>
       <div class="red" v-if="color == 'red'">红体</div>
       <div class="yellow" v-else-if="color == 'yellow'">黄体</div>
       <div class="green" v-else>绿体</div>
   </div>
   </body>
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               is_open: 0,
               color: 'red'
           },
           methods: {
               btnClick: function () {
                   this.is_open = !this.is_open;
               },
               // a1: function () {
               //     this.color = 'red'
               // },
               // a2: function () {
               //     this.color = 'yellow'
               // }
   
               changeColor: function (color, ev) {
                   console.log(color);
                   console.log(ev);
   
                   // this.color = color;
               }
           }
   
       });
   </script>
 

 

   ​         循环指令:v-for="(ele, index) in eleArr"  |  v-for="(v, k, i) in dic"

  
<div id="app">
       <!--
       循环指令:v-for="obj in objs"
       -->
   
       <h3>{{ list[4] }}</h3>
       <h3>{{ dic['gender'] }} {{ dic.gender }}</h3>
   
       <hr>
   
       <!--遍历数组-->
       <!--<p v-for="cless in list">-->
           <!--<span>-->
               <!--<b>{{ cless }}</b>-->
           <!--</span>-->
       <!--</p>-->
       <p v-for="(cls, index) in list">
           <span>
               <b>{{ index }} : {{ cls }}</b>
           </span>
       </p>
   
       <!--遍历对象(字典)-->
       <p v-for="(value, key, index) in dic">
           <span>
               <b>{{ index }} - 【{{ key }}】:{{ value }}</b>
           </span>
       </p>
   
       <!--复杂结构-->
       <!--name:O age:8-->
       <!--name:E  age:58-->
       <!--name:H age:7-->
       <p v-for="person in pArr">
           <span v-for="(v, k) in person" style="margin-right: 30px">
               <b>{{ k }}</b> : <i>{{ v }}</i>
           </span>
       </p>
   </div>
   
   
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               list: ["语文", "数学", "英语", "编程", "吹牛逼"],
               dic: {
                   name: 'B',
                   age: 18,
                   gender: 'male',
               },
               pArr: [
                   {
                       name: "O",
                       age: "8",
                   },
                   {
                       name: "E",
                       age: "58",
                   },
                   {
                       name: "H",
                       age: "7",
                   },
               ]
           },
   
       });
   
   </script>

 

  1. 一个实现简易留言板的案例(todolist)

    <style>
            span {
                background: green;
                padding: 5px;
                color: red;
                margin-right: 20px;
                border-radius: 50%;
            }
    </style>  //样式
    ​
    ​
    <div id="app">
        <p>
            <input type="text" v-model="txt">
            <button @click="addMsg">留言</button>
        </p>
        <ul>
            <!--<li><span>x</span>第二条</li>-->
            <!--<li>第一条</li>-->   要求留言以堆栈方式展现
            <li v-for="(msg, index) in msgs">
                <span @click="deleteMsg(index)">x</span>
                {{ msg }}
            </li></ul>
    </div>
    ​
    ​
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                txt: '',
                msgs: []
            },
            methods: {
                addMsg: function () {
                    var txt = this.txt;
                    if (txt) {
                        // unshift shift push pop
                        // this.msgs.push(txt);
                        this.msgs.unshift(txt);  //实现消息的堆栈
                        this.txt = '';
                    }
                },
                deleteMsg: function (index) {
                    this.msgs.splice(index, 1)  // 删除留言, 以index作为起始位置,切一个,不给任何值
                }
            }
        });
    </script>

     

  2. 事件指令和style属性结合使用

    <div id="app">
        <p :style="a"></p>
        <p @click="btnClick" :style="{width: '200px', height: h, backgroundColor: 'red'}">变高</p></div>
    ​
    ​
    ​
    // 根据点击事件切换不同的样式
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                a: {
                    width: '200px',
                    height: '200px',
                    // 'background-color': 'red'
                    backgroundColor: 'red'
                },
                h: '200px'
            },
            methods: {
                btnClick: function () {
                    this.h = '300px'
                }
            }
        });
    </script>

     

  3. 事件指令与class属性的使用

    实现不同的类样式的切换,class属性   {类名: 是否起作用} 字典内前面是类名,而字典的value值则是代表了是否该类起作用的判断条件

    <style>
    ​
            .red {
                width: 200px;
                height: 200px;
                background: red;
            }
            .yellow {
                width: 100px;
                height: 100px;
                background: yellow;
            }
    ​
            .orange {
                width: 100px;
                height: 100px;
                background: orange;
            }
    ​
            .y {
                border-radius: 50%;
            }
    </style>
    ​
    ​
    ​
    <div id="app">
        <button @click="redAction">变红</button>
        <button @click="yellowAction">变黄</button>
        <p :class="cname"></p>
    ​
    ​
        <!-- class: {}语法 => abc为类名, def为该类名的值,值可以为true|false, 代表abc是否起作用-->
        <!-- {类名: 是否起作用} -->
        <p :class="{abc: def}"></p><button @click="orangeAction">切换</button>
        <p :class="{orange: is_orange}"></p>
    ​
    ​
        <!-- class: []语法 => 多类名 -->
        <p :class="[a, b, c]"></p><!--整体语法-->
        <!-- x和z是变量: x值就是类名, z值决定类名y是否起作用 -->
        <p :class="[x, {y: z}]"></p>
    </div>
    ​
    ​
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                cname: '',
                def: false,
                is_orange: '',
                a: 'aaa',
                b: 'bbb',
                c: 'ccc',
                x: 'red',
                z: true
            },
            methods: {
                redAction: function () {
                    this.cname = 'red'
                },
                yellowAction: function () {
                    this.cname = 'yellow'
                },
                orangeAction: function () {
                    this.is_orange = !this.is_orange
                }
            }
        });
    </script>

     

posted on 2019-03-21 20:28  小锦毛  阅读(184)  评论(0编辑  收藏  举报