1. 技术文章
  2. Vue2.0-内部指令

Vue2.0-内部指令

由 陌路散爱 提交于 2021-02-10 07:58:10

live-server使用

实时编译的server服务器

npm install live-server -g

在项目目录中打开

live-server

编写第一个HelloWorld代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

v-if v-else v-show 指令

v-if:是vue 的一个内部指令，指令用在我们的html中。

v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-if & v-show & v-else</title>
</head>
<body>
    <h1>v-if 判断是否加载</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好：JSPang</div>
        <div v-else>请登录后操作</div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
               isLogin:false
            }
        })
    </script>
</body>
</html>

v-show的使用

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<div v-show="isLogin">你好：JSPang</div>

v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。

v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-for指令 ：解决模板循环问题

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>V-for 案例</title>
</head>
<body>
    <h1>v-for指令用法</h1>
    <hr>
    <div id="app">
       <ul>
           <li v-for="item in items">
                {{item}}
           </li>
       </ul>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                items:[20,23,18,65,32,19,54,56,41]
            }
        })
    </script>
</body>
</html>

对象循环输出


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
        <div v-if="isLogin">我已经登录了</div>
        <div v-else>请登录后操作</div>
        <div v-show="isLogin"> 我没有展示出来</div>
        <li v-for="item in items">
                {{item}}
        </li>
        <li v-for="student in students">
            {{student.name}}--->{{student.age}}
        </li>
    </div>
  
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'nihao Vue',
                isLogin:false,
                items:[1,2,2,3,4,5,5,5,6,77],
                students:[
                            {name:'jspang',age:32},
                            {name:'Panda',age:30},
                            {name:'PanPaN',age:21},
                            {name:'King',age:45}
                         ]
            }
        })
    </script>
</body>
</html>

v-text & v-html

我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>v-text & v-html 案例</title>
</head>
<body>
    <h1>v-text & v-html 案例</h1>
    <hr>
    <div id="app">
        <span v-text="message"></span><br/>
        <span v-html="msgHtml"></span>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!',
                msgHtml:'<h2>hello Vue!</h2>'
            }
        })
    </script>
</body>
</html>

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。

v-on：绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>v-text & v-html 案例</title>
</head>
<body>
    <h1>v-text & v-html 案例</h1>
    <hr>
    <div id="app">
        本场比赛得分： {{count}}<br/>
        <button v-on:click="jiafen">加分</button>
        <button v-on:click="jianfen">减分</button>
		<button @click="jianfen">减分</button>
        <input type="text" @keyup.enter="onEnter" v-model="count">
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                count:1
            },
            methods:{
                jiafen:function(){
                    this.count++;
                },
                jianfen:function(){
                    this.count--;
                },
                onEnter:function(){
                    this.count--;
                }
            }
        })
    </script>
</body>
</html>

我们的v-on 还有一种简单的写法，就是用@代替。

v-model指令

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>
<body>
    <h1>demo</h1>
    <hr>
    <div id="app">
        {{inputMessage}}<br/>        
        <input type="text"  v-model="inputMessage">
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                inputMessage:"",
            }
        })
    </script>
</body>
</html>

v-bind 指令

v-bind是处理HTML中的标签属性的，例如

就是一个标签，我们绑定上的src进行动态赋值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>

<body>
    <h1>demo</h1>
    <hr>
    <div id="app">
        <h3>多选按钮绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for='isTrue'>{{isTrue}}</label>

        <h3>多选绑定一个数组</h3>
        <p>
            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
            <label for="JSPang">JSPang</label><br />
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="JSPang">Panda</label><br />
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="JSPang">PanPan</label>
            <p>{{web_Names}}</p>

            <h3>单选按钮绑定</h3>
            <input type="radio" id="one" value="男" v-model="sex">
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="one">女</label>
            <p>{{sex}}</p>

            <div id="app">
                <img v-bind:src="imgSrc"  width="200px">
            </div>


        </p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                sex:"",
                web_Names: "",
                isTrue: false,
                inputMessage: "",
                imgSrc:'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=6e44efec3bfa828bd1239ae5c5242609/54fbb2fb43166d229d307e7d4e2309f79152d290.jpg',
            }
        })
    </script>
</body>

</html>

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

绑定CSS样式

在工作中我们经常使用v-bind来绑定css样式：

在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="./assets/js/vue.min.js"></script>
        <title>demo</title>
    </head>

    <body>
        <h1>demo</h1>
        <hr>
        <div id="app">
            <div :class="className">1、绑定classA</div>
            <div :class="{classA:isOk}">2、绑定class中的判断</div>
            <div :style="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
            <div :style="{color:red,fontSize:font}">5、绑定style</div>
            <div :style="styleObject">6、用对象绑定style样式</div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    className:"",
                    isOk:true,
                    classB:"font-size: 24px; color: green;",
                    classA:"font-size: 24px; color: red;",
                    red:"",
                    font:"",
                    styleObject:{
                        fontSize:'24px',
                        color:'green'
                    },
                        
                }
            })
        </script>
    </body>

    </html>

v-pre指令

在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

<div v-pre>{{message}}</div>

这时并不会输出我们的message值，而是直接在网页中显示{{message}}

v-cloak指令

在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如

<div class="#app">
    <p>{{value.name}}</p>
</div>

在加载的时候会看到

{{value.name}}

在页面出现，过了几秒之后才会渲染数据，在vue中有个指令可以解决这个问题，v-cloak 那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="./assets/js/vue.min.js"></script>
        <title>demo</title>
        <style>
         v-cloak {
            display: none;
            }
        </style>
    </head>

    <body>
        <h1>demo</h1>
        <hr>
        <div id="app">
            <div v-cloak>
                {{ message }}
              </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    message:"你好，v-cloak"
                        
                }
            })
        </script>
    </body>

    </html>

v-once指令

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>
标签
Vue.js
bind
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!