MVVM框架Vue基础

最新推荐文章于 2023-05-08 10:26:22 发布

jiehuifang

最新推荐文章于 2023-05-08 10:26:22 发布

阅读量204

点赞数

分类专栏： Web_css_Js 文章标签： mvvm 框架

本文链接：https://blog.csdn.net/qq_27952215/article/details/78557959

版权

Web_css_Js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

jiehuifang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MVVM框架Vue基础

Vue的基础常用指令v-bind:Vue实例的选项属性向DOM属性的单向绑定;v-if:根据Vue实例的选项属性是否显示该DOM结构;v-for:根据Vue实例的选项属性渲染该项目列表;v-on:绑定一个事件监听器;v-model:Vue实例的选项属性与DOM属性的双向绑定;<!DOCTYPE html><html> <head> <title>Vue</tit
复制链接

扫一扫

专栏目录