vue-基础2——模版语法
模板语法
https://cn.vuejs.org/v2/guide/syntax.html
插值
（1）文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
（2)原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
v-html ，防止XSS,CSRF（
(1) 前端过滤
(2) 后台转义(< > < >)
(3) 给cookie 加上属性 http
）
指令
指令 (Directives) 是带有 v- 前缀的特殊属性。
v-bind 动态绑定属性
v-if 动态创建/删除
v-show 动态显示/隐藏
v-on:click 绑定事件
v-for 遍历
v-model 双向绑定表单
(3)缩写
v-bind:src => :src
v-on:click => @click
class 与 style
(1)绑定HTML Class
-对象语法
-数组语法
(2)绑定内联样式
-对象语法
-数组语法
//需要将 font-size =>fontSize
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.red {
background-color: red;
}
.yellow{
background-color: yellow;
}
.aa{
background-color: yellow;
}
.bb{
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<div :class="classobj">动态切换classs-对象</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
classobj:{
aa:true,
bb:false,
cc:false
}
}
})
//Vue.set(vm.classobj,"dd",true) 拦截新的熟悉
</script>
</body>
</html>
条件渲染
(1)v-if(2)v-else v-else-if
(3)template v-if ,包装元素template 不会被创建
(4)v-show
列表渲染
(1)v-for (特殊 v-for="n in 10")
a. in
b. of
没有区别
(2)key：
*跟踪每个节点的身份，从而重用和重新排序现有元素
*理想的 key 值是每项都有的且唯一的 id。data.id
(3)数组更新检测
a. 使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() reverse()
b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
c. 不能检测以下变动的数组
vm.items[indexOfItem] = newValue
*解决* (1)Vue.set(example1.items, indexOfItem, newValue)
(2)splice
(4)应用:显示过滤结果
以一个过滤应用展示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="mytext" @input="handleInput()"/>
<ul>
<li v-for="data in list" :key="data">
{{data}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
mytext:"",
list:["aaa","bbb","ccc","ddd","add","cee","eee"],
oldlist:["aaa","bbb","ccc","ddd","add","cee","eee"]
},
methods: {
handleInput(){
console.log(this.mytext)
//利用this.mytext, 对数组进行过滤
// for()
// filter 过滤， map 映射
this.list = this.oldlist.filter(item=>item.indexOf(this.mytext)>-1)
// console.log(newarr)
}
}
})
</script>
</body>
</html>
事件处理
(1)监听事件-直接触发代码
(2)方法事件处理器-写函数名 handleClick
(3)内联处理器方法-执行函数表达式 handleClick($event) $event 事件对象
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture 捕获
.self 只有当前触发事件的事件源是自己才触发
.once.passive
每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次
事
件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没
用
preventDefault阻止默认动作。
这里一般用在滚动监听，@scroll，@touchmove 。因为滚动监听过程
中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使
滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅
度。
(5)按键修饰符
表单控件绑定/双向数据绑定
v-model
(1)基本用法
-购物车
(2)修饰符
.lazy :失去焦点同步一次
.number :格式化数字
.trim : 去除首尾空格
