Vue_(基础)Vue中的指令

  Vue.js中文文档  传送门  

  

  Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀

 

  Vue指令:
    v-model:数据双向绑定;
    v-text:以纯文本方式显示数据;
    v-html:可以识别HTML标签;
    v-once:只渲染元素或组件一次;
    v-pre:不进行编译,直接显示内容;
    v-for:对集合或对象进行遍历;

  

  项目结构

  

  【每个demo下方都存有html源码】

Hello World入门

  在浏览器中打印Hello World信息,并在Console控制台中可通过双向绑定快速修改app.msg中的信息

   app = new Vue({
                //获取id元素
                el:‘#Gary‘,
                //输出信息
                data:{
                    msg:‘Hello World!‘
                }
            });
        <div id="Gary">
            {{msg}}
        </div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>hello-vue</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            var app = null ;
            //js加载顺序
            window.onload = function(){
                app = new Vue({
                //获取id元素
                el:‘#Gary‘,
                //输出信息
                data:{
                    msg:‘Hello World!‘
                }
            });
            }
        </script>
    </head>
    <body>
        <div id="Gary">
            {{msg}}
        </div>
    </body>
</html>

Gary_hello-Vue.html

v-model指令  传送门

  v-model:数据双向绑定

  v-model绑定了input组件,获得input文本框中输入的值并通过{{username}}显示出来

   new Vue({
                    el:‘#Gary‘,
                    data:{
                        username:‘‘,
                        num:123,
                        arr:[11,22,33],
                        user:{
                            name:‘gary‘,
                            age:10
                        }
                    }
                })
用户名:<input type="text" v-model="username" />
            {{username}}<br/>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                new Vue({
                    el:‘#Gary‘,
                    data:{
                        username:‘‘,
                        num:123,
                        arr:[11,22,33],
                        user:{
                            name:‘gary‘,
                            age:10
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
        <div id="Gary">
            <!--username为用户输入的名字-->
            用户名:<input type="text" v-model="username" />
            {{username}}<br/>

            {{num}}<br/>
            {{arr}}<br/>
            {{user}}<br/>
        </div>
    </body>
</html>

Gary_v-model.html

  v-model指令与其它组件用法:checkbox、multi-checkbox、select、textarea组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                new Vue({
                    el:‘#Gary‘,
                    data:{
                        checked:false,
                        users:[],
                        selected:‘‘,
                        msg:‘‘
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="Gary">
             <div id="checkbox">
                     <input type="checkbox" v-model="checked"/>{{checked}}
             </div>

              <div id="multi-checkbox">
                     <input type="checkbox"  value="Gary-1" v-model="users"/>Gary-1
                     <input type="checkbox"  value="Gary-2" v-model="users"/>Gary-2
                     <input type="checkbox"  value="Gary-3" v-model="users"/>Gary-3
                     <br />
                     选中:{{users}}
             </div>

             <div id="select" >
                 <select v-model="selected">
                     <option>选择1</option>
                     <option>选择2</option>
                     <option>选择3</option>
                     <option>选择4</option>
                 </select>
                 <span>已选择:{{selected}}</span>
             </div>

             <div id="textarea">
                 <textarea v-model="msg"></textarea>
                 <p">{{msg}}</p>
             </div>

        </div>
    </body>
</html>

Gary_v-model-2.html

v-text指令  传送门

  v-text:以纯文本方式显示数据

  v-cloak:可以隐藏未编译的 Mustache 标签直到实例准备完毕,也就是隐藏{{}};

                new Vue({
                    el:‘#Gary‘,
                    data:{
                           msg:‘大家好我叫Gary‘
                    },
                    created:function(){
                        alert(1);
                    }
                });
        <div id="Gary">
            <input type="text" v-model="msg"/>
                 <h2 v-cloak>{{msg}}</h2>
                 <h2 v-text="msg"></h2>
                 <h2 v-html="msg"></h2>

                 <!--用来显示原始 Mustache 标签-->
                 <!--<h2 v-pre>{{msg}}</h2>-->
        </div>

  

  生命周期钩子created:该钩子在服务器端渲染期间不被调用  传送门

  created:function(){
                        alert(1);
                    }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                new Vue({
                    el:‘#Gary‘,
                    data:{
                           msg:‘大家好我叫Gary‘
                    },
                    created:function(){
                        alert(1);
                    }
                });
            }

        </script>
    </head>
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>

    <body>
        <div id="Gary">
            <input type="text" v-model="msg"/>
                 <h2 v-cloak>{{msg}}</h2>
                 <h2 v-text="msg"></h2>
                 <h2 v-html="msg"></h2>

                 <!--用来显示原始 Mustache 标签-->
                 <!--<h2 v-pre>{{msg}}</h2>-->
        </div>

    </body>
</html>

Gary_v-text.html

v-for指令  传送门

  v-for:对集合或对象进行遍历

  new Vue({
                    el:‘#Gary‘,
                    data:{
                           arr:[11,22,33,44],
                           user:{
                               id:‘01‘,
                               name:‘Gary‘
                           },
                           users:[
                           {id:‘01‘,name:"Gary01"},
                           {id:‘02‘,name:"Gary02"},
                           {id:‘03‘,name:"Gary03"}
                           ]
                    }
                });
 <div id="Gary">
                <ul>
                    <li v-for="value in arr">{{value}}</li><hr>
                    <li v-for="value in user">{{value}}</li><hr>
                    <!--输出value和key键值对  隐藏索引index,下标0开始-->
                    <li v-for="(value,key) in user">{{key}}-{{value}}</li><hr>
                    <!--获取元素下标可以用value.id-->
                    <li v-for="(value,index) in users">{{index}}-{{value}}</li><hr>
                </ul>
        </div>
        

  key  传送门

  为保证key都有的唯一性id,可以使用key="value.id"

<li v-for="(value,index) in users" :key="value">{{index}}-{{value.id}}</li><hr>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                new Vue({
                    el:‘#Gary‘,
                    data:{
                           arr:[11,22,33,44],
                           user:{
                               id:‘01‘,
                               name:‘Gary‘
                           },
                           users:[
                           {id:‘01‘,name:"Gary01"},
                           {id:‘02‘,name:"Gary02"},
                           {id:‘03‘,name:"Gary03"}
                           ]
                    }
                });
            }

        </script>
    </head>

    <body>
        <div id="Gary">
                <ul>
                    <li v-for="value in arr">{{value}}</li><hr>
                    <li v-for="value in user">{{value}}</li><hr>
                    <!--输出value和key键值对  隐藏索引index,下标0开始-->
                    <li v-for="(value,key) in user">{{key}}-{{value}}</li><hr>
                    <!--获取元素下标可以用value.id-->
                    <li v-for="(value,index) in users">{{index}}-{{value}}</li><hr>

                    <li v-for="(value,index) in users" :key="value">{{index}}-{{value.id}}</li><hr>

                </ul>
        </div>

    </body>
</html>

Gary_v-for.html

v-on指令  传送门

  v-on:绑定事件监听器 

  new Vue({
                    el:‘#Gary‘,
                    data:{
                           result:0
                    },
                    methods:{
                        //无参
                        show:function(){
                            console.log("show");
                        },
                        //带参
                        add(a,b){
                            this.result+=a+b;
                        }
                    }
                });

  v-on:click:鼠标点击按钮事件

  v-on:mouseenter:鼠标进入按钮触碰事件

        <div id="Gary">
                <button v-on:click="show">click!</button><br />
                <!--@相当于v-on鼠标简写-->
                <button @click="show">click!</button><br />
                <!--鼠标点击-->
                <button v-on:click="add(1,2)">add!</button>{{result}}
                <!--鼠标进入-->
                <button v-on:mouseenter="add(10,20)">add!</button>{{result}}
        </div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                new Vue({
                    el:‘#Gary‘,
                    data:{
                           result:0
                    },
                    methods:{
                        //无参
                        show:function(){
                            console.log("show");
                        },
                        //带参
                        add(a,b){
                            this.result+=a+b;
                        }
                    }
                });
            }

        </script>
    </head>

    <body>
        <div id="Gary">
                <button v-on:click="show">click!</button><br />
                <!--@相当于v-on鼠标简写-->
                <button @click="show">click!</button><br />
                <!--鼠标点击-->
                <button v-on:click="add(1,2)">add!</button>{{result}}
                <!--鼠标进入-->
                <button v-on:mouseenter="add(10,20)">add!</button>{{result}}
        </div>

    </body>
</html>

Gary_v-on.html

原文地址:https://www.cnblogs.com/1138720556Gary/p/10397506.html

时间: 2024-11-07 21:37:05

Vue_(基础)Vue中的指令的相关文章

Vue_(基础)Vue中的事件

Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候再重建: v-else:与v-if配对使用: v-elseif:与v-if配对使用: v-bind:属性绑定: v-cloak:可以隐藏未编译的 Mustache 标签直到实例准备完毕,也就是隐藏{{}}: Learn 一.event事件 二.v-show和v-if指令 三.键盘事件 四.v-bin

vue中自定义指令

在vue中自定义标签,首先要调用vue中一个directive的方法,具体方法:Vue.direction('指令名称',function(){ }); 例如我们要写一个关于颜色的指令,叫v-colorred: 1 Vue.directive('colorred',function(){ 2 3 this.el.style.color='red'; 4 }); 在html中,我直接用v-colorred指令就可以了,例如: 1 <p v-colorred>1234567890</p>

Vue中自定义指令的使用方法!

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令.举个聚焦输入框的例子,如下:(咳咳,借官网的用一用) 1.定义全局的自定义变量 main.js Vue.directive('color',{ inserted(el){ // 各单位注意,这里的el获取的是标签元素,说白了就是可以直接操作DOM cons

vue中的指令

一.声明式渲染有两种: 1.插值用两个花括号如:{{内容}} 例子:html <div id="app1"> <p>{{message}}</p></div> js: var nv = new Vue({ el:'#app1', data:{ message:'哈喽!', }}) 2.绑定数据如:v-bind:标签属性="插入的内容" html: <div id="app2"> <

vue中如何实现数据的双向绑定

vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this.value;会导致循环调用set方法,所以要借助中间对象的形式把值赋给中间对象,获取obj.name的时候我们获取中间对象的最新值即可 let obj = {name:'zhufeng',age:9};//数据 let temp = {name:"lily"};//借助中间对象 let

vue怎么自定义指令??

最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserted 被指令绑定指令的元素插入 父节点的时候调用 update 被绑定的元素模版只要发生变化,就会触发(通过比较模板变化前后) componentUpdated 被绑定元素所在模版完成一次更新周期时被触发 unbind 指令被解除绑定的时候 */ /*定义指令回调函数(钩子函数的几个参数的意义)第一个参数:绑定

vue常用的指令

vue常用的指令 <body> <div id="app"> <h1>{{ msg }}</h1>      //数据写入方式 <h2 v-text="msg"></h2>   //v-text写入数据,但是标签名内不能再写入其他的值,因为会被v-text覆盖 <h2 v-once="msg">{{ msg }}</h3>   //v-once本身不能

Vue基础进阶 之 自定义指令

自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: inserted: update: componentUpdated: unbind: 自定义指令的使用:在自定指令的名称前加 上 v-: 自定义指令的详细介绍网址:https://cn.vuejs.org/v2/guide/custom-directive.html 下面是关于这个5个钩子函数的示例:

Vue中v-on的指令以及一些其他指令

1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button" value="按钮" v-on:click="btn"> </div> <script> var vm = new Vue({ el: '#app', //methods是用来专门存放vue的处理方法的 methods: { btn