插值语法
1.被vue托管得标签中写{{}},内容可以写:变量,js简单得表达式和函数(函数要加括号执行,渲染的值为return的值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>vue使用</h1>
<p>{{name}}</p>
<p>{{age}}</p>
<p>{{sex}}</p>
<p>{{hobby}}</p>
<p>{{wife.name}}</p>
<p>{{wife.age}}</p>
<p>{{1+1}}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: "张三",
age: 18,
sex: "男",
hobby: ["吃饭", "睡觉", "打球"],
wife:{age:18,name:"李四"}
}
})
</script>
</html>
文本指令
写在标签上,以v-xx开头的都是vue的指令
v-text:把变量渲染到标签中,如果之前有数据,覆盖掉原来的数据
v-html:把标签渲染到该标签位置中
v-show:决定该标签显示与不显示,true显示,false不显示,display:none
v-if:控制标签的显示与隐藏,demo的删除与插入
事件指令
v-on:事件名='函数',放在标签上面,简写可以直接用@符号
事件名可以写:click,dbclick,input标签:change,blur,input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>文本指令</h1>
<button v-on:click="handershow">点我图片消失</button>
<div>
<img v-show="a"
src="https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
</div>
<h1>文本指令</h1>
<button @click="handershow">点我图片消失</button>
<div>
<img v-show="a"
src="https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: "lqz",
a: true
},
// 函数必须写在methods里面
methods: {
handershow: function () {
// this指代的是vm对象,this.a = false 就是vm对象里面的a属性赋值为false
// 这里进行取反操作
this.a = !this.a
}
}
})
</script>
</html>
属性指令
写在标签上的,name,class,id,src
v-bind:属性名='变量'
简写成:
v-bind:属性名='变量', :属性名='变量'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>文本指令</h1>
<button @click="handershow">点我</button>
<img :src="url" alt="">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: "lqz",
url: 'https://img0.baidu.com/it/u=1839135015,723795615&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
},
methods: {
handershow: function () {
this.url = 'https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
},
}
})
</script>
</html>
条件渲染
写在标签上:
v-if='布尔值/运算完是布尔值'
v-else-if='布尔值/运算完是布尔值'
v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>条件渲染</h1>
<div v-if="score>90">优秀</div>
<div v-else-if="score>=80 && score<90">良好</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
score: 89
},
methods: {
}
})
</script>
</html>
v-for 循环数组、字符串、对象、对象、数字
v-for='key in obj'
--》如果是数组,key就是数组的一个个元素,
--》如果是数字,key就是从1开始的一个个数字,
--》如果是字符串,key就是一个个的字符,
--》如果是对象,key就对象的value值
v-for=(key,value) in obj
--》如果是数组,key就是数组的一个个元素,value就是索引
--》如果是数字,key就是从1开始的一个个数字,value就是索引
--》如果是字符串,key就是一个个的字符,value就是suoyin
--》如果是对象,key就对象的value值,value就是对象的key
属于与对象的检测与更新
动态给数组添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>数组添加</h1>
<button @click="handerClick">点击新增</button>
<li v-for="value in girlList">
{{value}}
</li>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
girlList: ['qqq', 'vvv', 'ddd']
},
methods: {
handerClick(){
this.girlList.push('hhh')
},
}
})
</script>
</html>
数据的双向绑定(input标签)
v-model:数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>input标签</h1>
<p>用户名:<input type="text" v-model="name"></p>
<p>密码:<input type="text" v-model="password"></p>
<button @click="submit">提交</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: '',
password: '',
},
methods: {
submit() {
console.log(this.name, this.password)
}
}
})
</script>
</html>
input 事件
事件绑定 v-on:事件名='函数' -----@事件名='函数'
input 的事件:
-blur:失去焦点触发
-change:发生变化触发
-input:输入触发
事件修饰符
-stop:只处理自己的事件,不向父控件冒泡
-self:只处理自己的事件,子控件冒泡的事件不处理
-prevent:阻止a连接的跳转
-once:事件只会触发一次(适用于抽奖页面)
用法:@click.stop 这样就不会向父控件冒泡了
表单控制
单选以及多选:
我们选择的值其实是value里面写的
radio单选使用字符串
checkbox多选使用数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>表单控制</h1>
<p>用户名: <input type="text" v-model="name"></p>
<p>密码: <input type="text" v-model="password"></p>
<p>
<input type="radio" v-model="gender" value="男"> 男
<input type="radio" v-model="gender" value="女"> 女
</p>
<p>
<input type="checkbox" v-model="hobby" value="篮球"> 篮球
<input type="checkbox" v-model="hobby" value="足球"> 足球
<input type="checkbox" v-model="hobby" value="乒乓球"> 乒乓球
<input type="checkbox" v-model="hobby" value="橄榄球"> 橄榄球
{{hobby}}
</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: '',
password: '',
isRemember: false,
gender: '',
hobby: []
},
methods: {}
})
</script>
</html>