MVVM框架Vue基础

来源：互联网发布：notepad++ for mac 编辑：程序博客网时间：2024/06/01 10:37

Vue的基础常用指令

v-bind:Vue实例的选项属性向DOM属性的单向绑定;
v-if:根据Vue实例的选项属性是否显示该DOM结构;
v-for:根据Vue实例的选项属性渲染该项目列表;
v-on:绑定一个事件监听器;
v-model:Vue实例的选项属性与DOM属性的双向绑定;

<!DOCTYPE html><html>    <head>        <title>Vue</title>        <script src="D:\myDownload\vue.js"></script>    </head>    <body>        <div id="testVue">            <span v-bind:title='ATTRMessage' v-if='seen'>                {{HTMLMessage}}<!--采用简洁的模板语法来声明式的将数据渲染进DOM-->                <ol>                    <li v-for="item in items">                        {{item.text}}                    </li>                </ol>                <label>update message on html sync：</label>                <input v-model="HTMLMessage">            </span>            <br>            <button v-on:click='upperCase'>upperCase</button>            <button v-on:click='toggleShow'>toggleShow</button>        </div>    </body>    <script>      new Vue({          el:'#testVue',//把该Vue实例自动挂载到该ID的DOM元素上;手动挂载：new Vue({...}).$mount('DOM ID');          data:{              HTMLMessage:'message on html',              ATTRMessage:'message on attribute',              seen:true,              items:[                  {text:'a'},                  {text:'b'},                  {text:'c'}              ]          },          methods:{            upperCase:function(){                for(item of this.items){                    item.text=item.text.toUpperCase();                }            },            toggleShow:function(){                this.seen=this.seen?false:true;            }          }      });    </script></html>

Vue组件

<!DOCTYPE html><html>    <head>        <title>Vue</title>        <script src="D:\myDownload\vue.js"></script>    </head>    <body>        <div id="testVue">            <!--父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件,子组件利用$emit触发事件从而报告自己内部处理的情况-->            <!--把object整个对象绑定在该父组件中-->            <!--父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译-->            <my-compute  v-on:minus="minus" v-on:plus="plus" v-bind='object'>                <h1 slot="header">START</h1>                <label>num1</label>                <!--自动将用户的输入值转为 Number 类型-->                <input v-model.number='object.num1' type="number">                <br>                <label>num2</label>                <input v-model.number='object.num2' type="number">                <br>                <h1 slot="footer">END</h1>            </my-compute>        </div>    </body>    <script>        Vue.component('my-compute',{            //组件实例的作用域是孤立的，这意味着不能在子组件的模板内直接引用父组件的数据，父组件的数据需要通过prop才能下发到子组件中。            //props:['num1','num2','operation'],            props:{                num1:Number,//把传到子组件的prop属性进行类型验证,类型错误会在console中发出Vue的警告                num2:Number,                operation:String            },            data:function(){                return {                    str:'generate expression from data：'//子组件中的data必须是一个function                }            },            template:'<div>\                        <slot name="header"></slot>\                        <slot></slot>\                        <p>{{str}}{{num1}}{{operation}}{{num2}}={{result}}</p>\                        <button v-on:click="plus">plus</button>\                        <button v-on:click="minus">minus</button>\                        <slot name="footer"></slot>\                      </div>',                      //使用插槽分发内容            computed:{                result:function(){                    if(this.operation=="+"){                        return this.num1+this.num2;                    }                    if(this.operation=="-"){                        return this.num1-this.num2;                    }                }            },            methods:{                plus:function(){                    console.log("run plus function from child");                    this.$emit('plus');                },                minus:function(){                   console.log("run minus function from child");                   this.$emit('minus');                }            }           });        var vm=new Vue({            el:'#testVue',            data:{              object:{                  num1:0,                  num2:0,                  operation:"+"              }            },            methods:{                minus:function(){                    console.log("run minus function from parent");                    this.object.operation="-";                },                plus:function(){                    console.log("run plus function from parent");                    this.object.operation="+";                }            }        });    </script></html>

阅读全文

0 0