2 Vue常用指令
1. vue的使用要从创建Vue对象开始
var vm = new Vue();
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
var vm = new Vue({
el:"#app",
data: {
数据变量:"变量值",
数据变量:"变量值",
数据变量:"变量值",
},
});
el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
data: 保存vue.js中要显示到html页面的数据。
3. vue.js要控制器的内容外围，必须先通过id来设置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
2.1 vue用法
<body>
<div id="app">
{{name}} // 模板语法
</div>
<script>
const app = new Vue({ // 实例化
el:'#app', // 必须要有 指定作用域
data:{
name:'alex' // 数据
}
})
</script>
</body>
2.2 v-html;v-text
# v-text
<body>
<div id="app">
<p v-text="name"></p> #### v-text="name"
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'alex'
}
})
</script>
</body>
# v-text和v-html
<body>
<div id="app">
<p v-text="name"></p> #### v-text
<div v-html="hobby"></div> #### v-html
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'alex',
hobby:`<ul>
<li>篮球</li>
<li>女</li>
<li>足球</li>
</ul>`
}
})
</script>
</body>
2.3 v-for
<body>
<div id="app">
<div v-for="items in vegetables">{{items}}</div> ### 重点
<div v-for="items in fruit">{{items.name}}的价格是{{items.price}}</div> ### 重点
</div>
<script>
const app = new Vue({
el:'#app',
data:{ // 数据
vegetables:['茄子', '西红柿', '豆角'],
fruit:[{
name:'西瓜',
price:'1.99'},
{
name:'桃子',
price:'1.88'
}
]
}
})
</script>
</body>
2.4 v-if,v-else-if,v-else
<body>
<div id="app">
<div v-if="role=='student'">
学生登录系统
</div>
<div v-else-if="role == 'teacher'">
老师登录系统
</div>
<div v-else>
<h1>请使用正确的身份</h1>
</div>
</div>
<script>
const app = new Vue({
el:'#app',
data:({
role:'student'
})
})
</script>
</body>
# 浏览器console控制台。切换app.role='teacher'来实现v-else-if和v-else的实现
// 在html里只显示页面显示标签（说明添加的是appendChild）
2.5 v-show
<body>
<div id="app">
<p v-show="is_show">Vue中v-show指令</p>
</div>
<script>
const app = new Vue({
el:'#app',
data:({
is_show:true # 改变这里
})
})
</script>
// 页面标签显示是 display 来显示
</body>
2.6 v-bind 简写 ：
2.6.1 绑定a标签
我们之前的写法
<div id="app">
<a href="https://www.baidu.com">去百度</a>
</div>
vue中v-bind指令
<body>
<div id="app">
<a v-bind:href="link">去百度</a> ☆☆☆☆☆☆
</div>
<script>
const app = new Vue({
el:'#app',
data:({
link:'https://www.baidu.com'☆☆☆☆☆☆
})
})
</script>
</body>
2.6.2 绑定样式
之前的写法
<head>
<style>
.jump{
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com" class="jump">去百度</a>
</div>
</body>
vue中v-bind指令
<body>
<div id="app">
<a v-bind:href="link" :class="{jump:isActive}">去百度</a> ### v-bind简写是‘:’，绑定样式{}
</div>
<script>
const app = new Vue({
el:'#app',
data:({
link:'https://www.baidu.com',
isActive:true
})
})
</script>
</body>
2.7 v-on 简写 @
<body>
// 两者选一个
<div id="app">
<button v-on:click="my_click" @mouseenter="my_enter" @mouseleave="my_leave">点我给你想要的</button>
</div>
==================================================
<div id="app">
<button v-on="{click:my_click,mouseenter:my_enter,mouseleave:my_leave}">点我给你想要的</button>
</div>
==================================================
<script>
const app = new Vue({
el:'#app',
methods:{
my_click:function () {
alert('123')
},
my_enter:function () {
console.log('移入打印')
},
my_leave:function () {
console.log('移出打印')
}
}
})
</script>
</body>
2.8 小demo-给Alex加点料
壹：
<style>
#name{
150px;
height: 150px;
border: solid 1px black;
}
.green{
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="app">
<div id="name" :class="{green:isActive}"> # 绑定样式
<p v-text="name"></p>
</div>
<button v-on:click="my_click">点我改变颜色</button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'Alex',
isActive:true
},
methods:{
my_click:function () {
this.isActive = ! this.isActive
}
}
})
</script>
</body>
贰：
<body>
<div id="app">
<button @click="my_click">点我显示</button>
<h1 v-show="is_show">晓强</h1>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
is_show:false
},
methods:{
my_click:function () {
this.is_show = ! this.is_show
}
}
})
</script>
</body>
2.9 v-model 双向绑定
<body>
<div id="app">
<p>请输入你的姓名</p>
<input type="text" v-model="name">
{{name}}
<br>
<p>请选择你的性别</p>
<input type="checkbox" value="男" v-model="sex">
<input type="checkbox" value="女" v-model="sex">
{{sex}}
<br>
<p>单选</p>
<select name="" id="1" v-model="boy_friend">
<option value="林俊杰0">林俊杰0</option>
<option value="林俊杰1">林俊杰1</option>
<option value="林俊杰2">林俊杰2</option>
</select>
{{boy_friend}}
<br>
<p>多选</p>
<select name="" id="2" v-model="girl_friend" multiple>
<option value="林志玲0">林志玲0</option>
<option value="林志玲1">林志玲1</option>
<option value="林志玲2">林志玲2</option>
</select>
{{girl_friend}}
<br>
<p>textarea</p>
<textarea name="" id="" cols="30" rows="10" v-model="my_textarea">
</textarea>
{{my_textarea}}
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'xiaoqiang',
sex:[],
boy_friend:[],
girl_friend:[],
my_textarea:''
}
})
</script>
</body>
2.10 指令修饰符
2.10.1 懒惰lazy/去空格（trim）
2.10.2 number显示数据类型
2.10.3 pre标签显示多个空格
<body>
<div id="app">
<p>lazy回车之后显示</p>
<input type="text" v-model.lazy="name">
<input type="text" v-model.lazy.trim="name"> # 去空格
{{name}}
<hr>
<p>number显示数据类型</p>
<input type="text" v-model.number="phone">
{{typeof phone}}
<hr>
<p>pre标签显示多个空格</p>
<input type="text" v-model="pre">
<pre>{{pre}}</pre>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'',
phone:null,
pre:'',
}
})
</script>
</body>
2.11 计算指令 computed
# 效果是字符串拼接
<body>
<div id="app">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>python基础</td>
<td><input type="text" v-model="python"></td>
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model="web"></td>
</tr>
<tr>
<td>django</td>
<td><input type="text" v-model="django"></td>
</tr>
<tr>
<td>总分</td>
<td>{{python + web +django}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{(python + web + django)/3}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
python:100,
web:100,
django:100
}
})
</script>
</body>
<tr>
<td>python基础</td>
<td><input type="text" v-model.number="python"></td>
</tr>
<body>
<div id="app">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>python基础</td>
<td><input type="text" v-model.number="python"></td>
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model.number="web"></td>
</tr>
<tr>
<td>django</td>
<td><input type="text" v-model.number="django"></td>
</tr>
<tr>
<td>总分</td>
<td>{{python + web +django}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{(python + web + django)/3}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
python:100,
web:100,
django:100
}
})
</script>
</body>
- 在继续改，我们在总分和平均分的时候算的太麻烦了，怎么办呢，引出computed
# computed版本------对比没有注释掉的部分
<body>
<div id="app">
<table border="1">
<thead>
<!--<tr>-->
<!--<th>学科</th>-->
<!--<th>成绩</th>-->
<!--</tr>-->
</thead>
<tbody>
<!--<tr>-->
<!--<td>python基础</td>-->
<!--<td><input type="text" v-model.number="python"></td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>前端</td>-->
<!--<td><input type="text" v-model.number="web"></td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>django</td>-->
<!--<td><input type="text" v-model.number="django"></td>-->
<!--</tr>-->
<tr>
<td>总分</td>
<td>{{sum_num}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{(python + web + django)/3}}</td>
</tr>
</tbody>
</table>
</div>
<script>
// const app = new Vue({
// el: '#app',
// data: {
// python:100,
// web:100,
// django:100
// },
computed:{
sum_num:function () {
return this.python + this.web + this.django
},
avg:function () {
return this.sum_num / 3
}
}
})
</script>
</body>
例：
# getter
<div id="app">
{{ reverseMsg }}
<button @click="handleClick">改变</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello word'
},
methods:{
handleClick:function () {
this.msg = '我在学习vue的计算属性'
}
},
computed:{
// computed 默认只有getter方法
// 计算属性最大的优点：产生缓存 如果数据没有发生改变 直接从缓存中取
reverseMsg:function () {
return this.msg.split('').reverse().join('')
}
}
})
</script>
# setter
<div id="app1">
{{content}}
<input type="text" v-model="content" @input="handleInput">
<button @click="handleClick">改变</button>
</div>
<script>
var app = new Vue({
el:'#app1',
data:{
msg:''
},
methods:{
handleInput:function (event) {
const {value} = event.target;
this.content = value
},
handleClick:function(){
console.log(this.content) // 点击改变打印值
}
},
computed:{
content:{
set:function (newV) {
// console.log(newV)
this.msg = newV
},
get:function () {
return this.msg
}
}
}
})
2.12 自定义指令 directive
- 模板
Vue.directive('mingzi',function (el,bindding) {});
- 步骤
① 搭建vue
② 新建自定义指令
③ 绑定个盒子
④ 操作
① 搭建vue
<body>
<div id="app"> </div>
<script>
const app = new Vue({
el:'#app',
})
</script>
</body>
② 新建自定义指令
<!--<body>-->
<!--<div id="app">-->
<!--</div>-->
<!--<script>-->
Vue.directive('boxs',function (el,bindding) { });
<!--const app = new Vue({-->
<!--el:'#app',-->
<!--})-->
<!--</script>-->
<!--</body>-->
③ 绑定个盒子,加个样式和数据
<!--<body>-->
<!--<div id="app">-->
<div class="box" v-boxs="text"></div>
<!--</div>-->
<!--<script>-->
<!--Vue.directive('boxs',function (el,bindding) {-->
<!---->
<!--});-->
<!--const app = new Vue({-->
<!--el:'#app',-->
data:{
text:true
}
})
//</script>
//</body>
- Vue.directive里打印
Vue.directive('boxs',function (el,bindding) {
console.log(el); // 绑定指定的元素（div）
console.log(bindding) // 自定义指令的对象（.value是一个值）
});
④ 操作--盒子位置变化的demo
<body>
<div id="app">
<div class="box" v-boxs="text"></div>
</div>
<script>
Vue.directive('boxs',function (el,bindding) {
if(bindding.value){
el.style.position = 'fixed';
el.style.bottom = 0;
el.style.right = 0
}else{
el.style.position = 'static';
}
});
const app = new Vue({
el:'#app',
data:{
text:true
}
})
</script>
</body>
-
看下图，我们所写的都会显示那么我们研究一下标红的地方--modifiers
-
我们怎么改呢
<div id="app">
<div class="box" v-boxs.right.top="text"></div> ☆☆☆☆☆
</div>
<script>
Vue.directive('boxs',function (el,bindding) {
console.log(el);
console.log(bindding);
console.log(bindding.modifiers); ☆☆☆☆☆
......
- 盒子变换位置
<body>
<div id="app">
<!--<div class="box" v-boxs.right.top="text"></div>-->
<div class="box" v-boxs.left.bottom="text"></div>
</div>
<script>
Vue.directive('boxs',function (el,bindding) {
console.log(el);
console.log(bindding);
console.log(bindding.modifiers);
let position = bindding.modifiers; ☆☆☆☆☆☆
if(bindding.value){
el.style.position = 'fixed';
// el.style.bottom = 0;
// el.style.right = 0
for(let key in position){ ☆☆☆☆☆☆
el.style[key]=0
}
}else{
el.style.position = 'static';
}
});
const app = new Vue({
el:'#app',
data:{
text:true
}
})
</script>
2.13 获取DOM操作
<body>
<div id="app">
<div ref="my_box"> ☆☆☆☆☆ref
<p>获取DOM</p>
</div>
<button @click="my_click">点我给盒子改变样式</button>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
my_click:function () {
this.$refs.my_box.style.color = 'red' ☆☆☆☆☆refs/my_box
}
}
})
</script>
</body>
2.14 watch 监听
# 基础的数据类型
<div id="app">
<input type="text" v-model="msg">
{{ msg }}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:''
},
watch:{
msg:function (newV,oldV) {
console.log(newV,oldV)
}
}
})
</script>
# 复杂的数据类型 object Array
<div id="app">
{{ stus[0].name }}
<button @click="stus[0].name='Tom'">改变</button>
</div>
<script>
// 对于普通的数据类型 可以用watch直接监听 对于复杂的数据类型 obj/array 要深度监视
var app = new Vue({
el:'#app',
data:{
stus:[{name:'jack'}]
},
watch:{
'stus':{
deep:true,
handler:function (newV,oldV) { # 重点
console.log(newV[0].name)
}
}
}
})
</script>