Vue系统指令

在vue的指令语法（用于解析标签）中分为系统指令和自定义指令：
系统指令（vue中封装好的指令，可以直接使用）
  1. 语法格式：v-xxxx <元素 v-xxx=‘指令值’>
  2. 系统指令：v-（model , html , text , pre , if , show , on , bind，for）
特殊记忆：[v-cloak]：斗篷指令
  1. v-html指令：
    1. 实现文本的插入，{{}}和v-text默认不解析数据中的代码，为了防止xss攻击（通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意代码到网页）
  2. v-text：
    1. 也是文本插入的一种
  3. v-pre：
    1. 原样输入：在解析过程中vue语法不会被解析
  4. [v-cloak]：斗篷
面试题：如何解决vue页面的初始化闪动问题：如果在工作的时候引入vue.js文件时候需要写在后面，因为vue.js文件在加载的时候。需要时间，由于网络原因出现加载过慢的现象，会导致代码需要等待。所有需要使用[v-cloak]功能。
代码如下：
//在style中写
//
[v-cloak]{
    display:none;
}
//在html中写
<p v-cloak>{{name}}</p>
//在js中
除了将vue.js放在body下面应用外，其他按原先写

　　v-if指令：

    1. 控制元素的显示于不显示，若为true，显示，false相反

　　v-show指令：

    1. 同上（v-if）
注意：show与if的区别：if若为false，就删除该节点。show若为false，就给该元素设置一个style=display：none属性。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" placeholder="a" v-model="a">
        <p>{{a}}</p>//html
        <p v-text="b">这个是{{b}}</p>//<h1>b</h1>
        <p v-html="b">这个是{{b}}</p>//b

        <p v-pre>不会解析：{{b}}</p>//不会解析：{{b}}
        
        <p v-show="c">这个是v-show</p>//这个是v-show
        <p v-if="c">这个是v-if</p>//这个是v-if
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            a:'html',
            b:'<h1>b</h1>',
            c:true,
        }
    })
</script>
</html>

v-model：双相系统绑定，用于数据绑定，默认收集的就是value值（用于form表单元素）

代码如下：
//v-model使用语法
<>input type='text' name='xxx' v-model='键'>
<p>{{键}}</p>//将输入框中和p标签中的信息相连，当input中值该变后，p中改变
new Vue({
    el:'',
    data:{
        键：值    
    }
})

v-bind指令：在属性使用，在属性前面添加，系统会将属性值解析为关于js的表达式

注意：关于v-bind与v-model
v-bind为单项绑定：数据只能从data流向页面
v-model为双向绑定：数据不仅能从data流向页面，还可以从页面流向data
代码如下：
//可以简写为
<元素 :属性='vue语法'></元素>

<div id="app">
    <a :href="b">{{str}}</a>//在属性前面加v-bind 或 ：
    <button @click="fun()">点击变游戏</button>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            b:'http://www.baidu.com',
            str:'百度',
        },
        methods:{
            fun(){
                this.b='http://www.7k7k.com';
                this.str='小游戏';
            }
        }
    })
</script>

 

posted @ 2022-09-07 00:02  hollow~  阅读(91)  评论(0)    收藏  举报