vue基础操作
模板语法 mustache语法 ===》{{}}：双大括号
模板语法支持性很高，js所有数据类型都支持的，但是不支持输出语法 （ console.log alert ）
- class
- object
div>
div>
- arr
div>
div>
- style
- object
div>
div>
- arr
div>
指令
指令基本介绍
就是绑定在Dom上的特殊属性，一般用"v-"标识,具有一定的功能，可以操作DOM元素
- 作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM
- 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM
- 这个指令需要模板语法的支持，所以我们采用jsx语法糖
格式：
v-xxx = “mustache语法”
v-xxx = “msg”
v-xxx = “{{msg}}”
声明失渲染指令
1、v-html
- 将一个数据展示在一个DOM内容中，类似于 innerHTML( html属性 )
- 防止脚本攻击 xss CSRF
2、v-bind
- 单项数据绑定
- 使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind
- 格式： v-bind:DOMattr = “data”
- 简写： :DOMattr = “data”
3、v-text
- 非转义输出
以上三个指令代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
//v-html
<p v-html="a"></p>
//v-bind
<input type="text" v-bind:value="msg">
//v-bind 简写
<input type="text":value="msg">
//v-text
<p v-text="a"></p>
</div>
</body>
<script src="../dep/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"你好，我是一只噬元兽",
a:"我是橘座",
}
})
</script>
</html>
运行结果
条件渲染指令
1、v-if
- v-if 有三种使用形式
- 单路分支
- 双路分支
- 多路分支v-if
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>v-if-单路分支</h3>
<p v-if = "flag">我是单路分支</p>
<hr>
<h3>v-if双路分支</h3>
<p v-if = "flag">分支一</p>
<p v-else>分支二</p>
<hr>
<h3>v-if-多路分支</h3>
<p v-if = 'type ==="A"'>分支一</p>
<p v-else-if = 'type ==="B"'>分支二</p>
<p v-else>分支三</p>
</div>
<script src="../dep/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
flag:false,
type:'A'
}
})
</script>
</body>
</html>
2、v-show
- v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-show="flag">v-show</p>
</div>
<script src="../dep/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
flag:false
}
})
</script>
</body>
</html>
v-if VS v-show
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
template
template标签如果放在模板的范围内使用，那么将来不会被解析渲染
循环渲染指令
v-for 是用来做列表渲染的
-
格式
v-for = " xxx in(of) data "
举例：
v-for = " item in(of) todos "
-
带参数的格式
v-for = " (item,index) in todos "
-
key( 留一部分 )
-
每次列表循环的后面都要绑定一个key,是为了进行DOM的唯一标识，这样就不会让vue因为惰性而影响列表的正常渲染
-
理想的key是使用数据中的id
-
**数据的更新检测 **
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)
vm.items.length = 0
解决 (1)splice
-
methods 方法
-
事件的添加使用的是 v-on:eventType = ‘事件处理程序’
-
事件处理程序往options里面的methods配置项中书写
new Vue({
el: '#app',
data: {
arr: [1,2,3,4]
},
methods: {
add () {
this.arr.push(5)
}
}
})
- computed 计算属性
-
- 计算属性中存放的也是方法
-
- 计算属性的方法中必须要有返回值
-
- 计算属性的方法名可以像data选项中定义的数据一样使用
事件
- 指令v-on
- 格式
v-on:eventType = “事件处理程序名称”
- 简写
@eventType = ‘事件处理程序名称’
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>字符串渲染</h3>
<ul>
<li v-for="i in str">{{i}}</li>
</ul>
<hr>
<h3>数组渲染</h3>
<button v-on:click="add">点击添加数组项</button>
<button @click="reduce">点击减少数组项</button>
<button @click="replace">点击替换数组项</button>
<button @click="clear">清空数组项</button>
<ul>
<li v-for="(value,index) in arr"><!--两个参数，第一个是值，第二个是索引-->
<p>值：{{value}}</p>
<p>索引：{{index}}</p>
</li>
</ul>
<hr>
<h3>数字渲染</h3>
<ul>
<li v-for = "value in num">{{value}}</li>
</ul>
<hr>
<h3>对象渲染</h3>
<ul>
<li v-for = "(value,key,index) in obj" :key="key"><!--两个参数，第一个是值，第二个是键-->
<p>值：{{value}}</p>
<p>键：{{key}}</p>
<p>索引:{{index}}</p>
</li>
</ul>
<hr>
<h3>json数据渲染</h3>
<ul>
<li v-for="item in json" :key="item.id"><!--此时渲染的结果为对象-->
{{item}}
<p v-for="value in item">
{{value}}<br>
</li>
</ul>
<hr>
<h3>json新数据渲染</h3>
<ul>
<li v-for="item in collect" :key="item.id"><!--此时渲染的结果为对象-->
{{item}}
<p v-for="value in item">
{{value}}<br>
</li>
</ul>
</div>
<script src="../dep/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
str:"I am a cat",
arr:[1,2,3,4,5,6,7],
num:6,
obj:{
name:"小可爱",
age:18,
hobby:"撸猫",
},
json:[{
id:1,
name:"猫猫",
hobby:"吃鱼",
url:"url1"
},{
id:2,
name:"幺幺",
hobby:"睡觉",
url:"url2"
},{
id:3,
name:"张狗子",
hobby:"挨打",
url:"url3"
}
]
},
methods:{
add () {
this.arr.push(8)
},
reduce (){
this.arr.pop()
},
replace (){
// this.arr[0] = a;
this.$set(this.arr,0,'aa')
},
clear (){
this.arr.splice(0,this.arr.length)
},
},
computed:{
collect(){// 这里存放的也是方法，但是这个方法是有返回值的，并且方法名还可以当做一个变量（相当于直接在data里面定义的数据）来使用
return this.json.filter((item) => {
return item.id > 2
})
}
}
})
</script>
</body>
</html>