vue语法

Posted 2021-06-08 stay_少年与梦

vue模板语法

1.插值

1.直接使用{{}} 将数据解释为普通文本，而非html代码

解决刷新或文档过长出现{{}}问题

解决方法1可以用v-text

解决方法2 使用 v-cloak指令

<div v-cloak>{{msg}}</div>

<style>
        [v-cloak]{
            display: none;
        }
</style>

v-html

会将元素当成HTML标签解析后输出

标签中使用 v-html=“状态名”,小心防止XSS.csrf攻击

<p v-text = 'hello'></p>

new Vue({
        el:'#app',
        data:{
            hello:'<span>hello world</span>'
        }
    })

v-text

会将元素当成纯文本输出

v-bind

绑定属性
可以简写 v-bind:src=“im”

绑定一个attribute 可以简写  v-bind:src="im"   简写 :src="im"
内联字符串 <img :src="'/path/to/images/' + fileName">

2.指令

指令是带有v-前缀的特殊attribute（属性），一些指令能够接收一个参数，在指令名称之后以冒号表示。

v-once

执行一次性地插值，当数据改变时，插值处的内容不会更新

<span v-once>这个将不会改变: {{ msg }}</span>

v-bind

v-bind指令可以用于响应式地更新html属性

<a v-bind:href="url">...</a>    
可以简写   <a :href="url">...</a>
动态参数
<a v-bind:[Name]="url"> ... </a>

注意 Name会自动把大写转换成小写,所以在定义键的时候要使用小写

v-on

v-on 指令，用于监听DOM事件

<a v-on:click="doSomething">...</a>
缩写 <a @click="doSomething">...</a>
动态参数的缩写<a @[]="doSomething"> ... </a>
内联处理器中的方法
		<button v-on:click="say('hi')">Say hi</button>
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 或者event 把它传入到方法
<button v-on:click="warn( 'yet.', $event)">
	Submit
</button>

表单控件绑定/双向数据绑定

1.v-model

2.修饰符

.lazy 失去焦点同步一次
.number 格式化数字
.trim 去除收尾空格

v-if

v-if 控制切换一个元素是否显示(动态的创建和删除一个节点)
v-else 要紧跟在带有v-if或者v-else-if的元素之后
v-else-if
原理
根据表达式的值来有条件地控制元素显示隐藏, 在切换时让整个dom元素以及它的绑定数据绑定或组件被销毁并重建，简单的理解就是控制元素的显示隐藏，让整个dom元素销毁或重建

v-show

另一个控制元素显示和隐藏的元素，v-show是通过给元素设置样式display属性，控制元素的显示和隐藏，如果v-show的值是true，则设置display:true,否则设置display:false。其用法和v-if相似。注意：v-show不支持元素，也不支持
v-else。

v-for 列表渲染

<li v-for="item in items" :key="item">
<li v-for="(item, index) in items">

in也可以使用of替代，v-for里面使用值范围，可以接受整数，数组，对象
整数 v-for=“n in 10”

2. 列表key值

跟踪每个节点的身份,从而重用和重新排序现有元素
理想的key值是每项都有的且唯一的id

3. 数组更新检测

• 使用以下方法操作数组,可以检测变动
  • push() pop() shift() unshift() splice() sort() reverse()

• filter() concat() slice() map() 不会影响到原数组(想更新用新数组替换旧数组)
  • 不能检测以下变动的数组
    • vm.itmes[索引]= newValue
    • 解决方法1：用 splice vm.itmes.splice(0,1,‘值’)
    • 解决方法2：用 vue.set(vm.items,0,‘newvalue’)
      • 第一个参数是要改变的数组
      • 第二个参数是 要改变数组中那个数据的索引
      • 第三个参数是 新值

代码如下（示例）：

<ul>
<li v-for="item in items">{{item}}</li>
</ul>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0,
             items:[{id:1,name:"张三"},{id:2,name:"李四"}]
        },
    })
</script>

v-pre

{{变量}} 里面的内容不解析

缩写

v-bind:src => :src

v-on:click => @click