Vue基础语法
模板语法
插值语法
先创建一个id为app的容器
<div id="app">
<div>{{msg}}</div>
</div>
让后将容器id与数据进行绑定
new Vue({
el: '#app',
data: {
msg: 'Hello World'
}
});
指令语法
1. 什么是指令？
- 什么是自定义属性
- 指令的本质就是自定义属性
- 指令的格式：以v-开始（比如：v-cloak）
2. v-cloak指令的用法
-
插值表达式存在的问题：“闪动”
-
如何解决该问题：使用v-cloak指令
-
解决该问题的原理：先隐藏，替换好值之后再显示最终的值
① 首先提供css样式
[v-cloak] {
display: none;
}
② 让后在插值表达式所在的标签中添加v-cloak指令
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
3. 数据绑定指令的用法
v-text 填充纯文本
① 相比插值表达式更加简洁
html代码如下：
<div id="app">
<div v-cloak>{{msg}}</div>
<div v-text="msg"></div>
</div>
js代码如下：
new Vue({
el: '#app',
data: {
msg: 'Hello World!'
}
});
v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用
html代码如下：
<div id="app">
<div v-cloak>{{msg}}</div>
<div v-text="msg"></div>
<div v-text="msg1"></div>
<div v-html="msg1"></div>
</div>
js代码如下：
new Vue({
el: '#app',
data: {
msg: 'Hello World!',
msg1: '<h1>Hello</h1>'
}
});
v-pre 填充原始信息
① 显示原始信息，跳过编译过程（分析编译过程）
html代码如下：
<div id="app">
<div v-cloak>{{msg}}</div>
<div v-text="msg"></div>
<div v-text="msg1"></div>
<div v-html="msg1"></div>
<div v-pre>{{msg}}</div>
</div>
js代码如下：
new Vue({
el: '#app',
data: {
msg: 'Hello World!',
msg1: '<h1>Hello</h1>'
}
});
4. 数据响应式
如何理解响应式
① html5中的响应式（屏幕尺寸的变化导致样式的变化）
② 数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
① 数据绑定：将数据填充到标签中
v-once 只编译一次
① 显示内容之后不再具有响应式功能
html代码如下：
<div id="app">
<div>{{msg}}</div>
<div v-once>{{info}}</div>
</div>
js代码如下：
new Vue({
el: '#app',
data: {
msg: 'Hello World!',
info: '不再具有响应功能'
}
});
单向数据绑定
1. 什么是单向数据绑定
2. 单向数据绑定分析
v-bind指令用法
<input type='text' v-bind:value='msg' />
可以简写成
```
html代码如下：
<div id="app">
<div>{{msg}}</div>
<input type="text" v-bind:value="msg" />
<br />
<input type="text" :value="msg" />
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello World!'
}
});
双向数据绑定
1. 什么是双向数据绑定？
2. 双向数据绑定分析
v-model指令用法
<input type='text' v-model:value='msg' />
可以简写成
<input type='text' v-model='msg' />
html代码如下：
<div id="app">
<div>{{msg}}</div>
<div>
<input type='text' v-model:value='msg' />
<input type="text" v-model="msg" />
</div>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello World!'
}
});
3. MVVM设计思想
① M(model)
② V(view)
③ VM(View-Model)
事件绑定
1. Vue如何处理事件？
-
v-on指令用法
<input type='button' v-on:click='num++' /> -
v-on简写形式
<input type='button' @click='num++' />
2. 事件函数的调用方式
-
直接绑定函数名称
<button v-on:click='say'>Hello</button> -
调用函数
<button v-on:click='say()'>Say Hi</button>
html代码如下：
<div id="app">
<div>{{num}}</div>
<input type="button" v-on:click="num++" value="单击按钮" />
<input type="button" @click="num++" value="单击按钮" />
<input type="button" v-on:click="handle" value="单击按钮" />
<input type="button" @click="handle()" value="单击按钮" />
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function() {
this.num++;
}
}
});
3. 事件函数参数传递
- 普通参数和事件对象
<button v-on:click='say("hi", $event)'>Say Hi</button>
html代码如下：
<div id="app">
<div>{{num}}</div>
<button v-on:click="handle1">单击1</button>
<button v-on:click="handle2(123, $event, 456)">单击2</button>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event);
this.num++;
},
handle2: function(num1, event, num2) {
console.log(num1);
console.log(event);
console.log(num2);
this.num++;
}
}
});
4. 事件修饰符
- stop阻止冒泡
<a v-on:click.stop="handle">跳转</a>
原生JS代码阻止冒泡
html代码如下：
<div id='app'>
<div>{{num}}</div>
<div v-on:click="handle">
<button v-on:click="handle1">点击</button>
</div>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function () {
this.num++;
},
handle1: function (event) {
event.stopPropagation();
console.log('点击');
}
}
});
stop阻止冒泡
html代码如下：
<div id='app'>
<div>{{num}}</div>
<div v-on:click="handle">
<button v-on:click.stop="handle1">点击</button>
</div>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function () {
this.num++;
},
handle1: function (event) {
// event.stopPropagation();
console.log('点击');
}
}
});
- prevet阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
原生JS代码阻止默认行为
html代码如下：
<div id='app'>
<div>{{num}}</div>
<a v-on:click="handle" href="http://www.baidu.com">百度一下</a>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function (event) {
event.preventDefault();
}
}
}
prevent阻止默认行为
html代码如下：
<div id='app'>
<div>{{num}}</div>
<a v-on:click.prevent="handle" href="http://www.baidu.com">百度一下</a>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function (event) {
// event.preventDefault();
}
}
}
5.按键修饰符
-
enter回车键
<input v-on:keyup.enter='submit' /> -
delete删除键
<input v-on:keyup.delete='handle' />
html代码如下：
<div id='app'>
<form action="">
<div>
用户名：<input type="text" v-model="uname" v-on:keyup.delete="clearContent" />
</div>
<div>
密码：<input type="text" v-model="pwd" v-on:keyup.enter="handleSubmint" />
</div>
<div>
<input type="button" v-on:click="handleSubmint" value="提交">
</div>
</form>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
uname: '',
pwd: ''
},
methods: {
clearContent: function () {
this.uname = ''
},
handleSubmint: function (event) {
console.log(this.uname + '&' + this.pwd);
}
}
}
6. 自定义按键修饰符
-
全局config.keyCodes对象
Vue.config.keyCodes.f1 = 70
html代码如下：
<div id='app'>
<input type="text" v-on:keyup.aaa="handle">
<input type="text" v-on:keyup.f1="handle">
</div>
js代码如下：
Vue.config.keyCodes.aaa = 65;
Vue.config.keyCodes.f1 = 70
const vm = new Vue({
el: '#app',
data: {
info: ''
},
methods: {
handle: function(event) {
console.log(event.keyCode);
}
}
});
属性绑定
1. Vue如何动态处理属性？
-
v-bind指令用法
<a v-bind:href='url'>跳转</a> -
缩写形式
<a :href='url'>跳转</a>
html代码如下：
<div id="app">
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
},
methods: {
}
});
2. v-model的底层实现原理分析
<input v-bind:value="msg" v-on:input="msg=$event.target.value" />
html代码如下：
<div id="app">
<input v-bind:value="msg" v-on:input="msg=$event.target.value" /><br />
<input type="text" @input="msg=$event.target.value" /><br />
<input type="text" :value="msg" /><br />
<input type="text" v-model="msg" />
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
msg: '123'
},
methods: {
}
});
样式绑定
1. class样式处理
-
对象语法
<div v-bind:class="{active: isActive}"><div>
css代码如下：
.active {
border: 1px solid black;
width: 100px;
height: 100px;
}
html代码如下：
<div id="app">
<div :class="{active : isActive}"></div>
<button @click="handle">切换</button>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
isActive: true
},
methods: {
handle: function () {
this.isActive = !this.isActive;
}
}
});
-
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
css代码如下：
.active {
border: 1px solid black;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
html代码如下：
<div id="app">
<div v-bind:class="[activeClass, errorClass]">样式绑定</div>
<div v-bind:class="[activeClass, errorClass]">样式绑定</div>
<button @click="handle">切换</button>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function () {
this.activeClass = '';
}
}
});
样式绑定相关语法细节：
-
对象绑定和数组绑定可以结合使用
css代码如下：
.active { border: 1px solid black; width: 100px; height: 100px; } .error { background-color: orange; } .test { color: blue; }html代码如下：
<div id="app"> <div :class="[activeClass, errorClass, {test : isTest}]">样式绑定</div> <button @click="handle">切换</button> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'error', isTest: true }, methods: { handle: function () { this.activeClass = ''; // this.errorClass = ''; this.isTest = !this.isTest; } } }); -
class绑定的值可以简化操作
css代码如下：
.active { border: 1px solid black; width: 100px; height: 100px; } .error { background-color: orange; } .test { color: blue; }html代码如下：
<div id="app"> <div :class="{active : isActive, error : isError}">样式绑定</div> <div :class="objClass">样式绑定</div> <button @click="handle">切换</button> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { isActive: true, isError: true, objClass: { active: true, error: true } }, methods: { handle: function () { // this.objClass.active = !this.objClass.active; this.objClass.error = !this.objClass.error; } } });css代码如下：
.active { border: 1px solid black; width: 100px; height: 100px; } .error { background-color: orange; } .test { color: blue; }html代码如下：
<div id="app"> <div :class="arrClasses">样式绑定</div> <button @click="handle">切换</button> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { arrClasses: ['active', 'error'] }, methods: { handle: function () { this.arrClasses = ''; } } });
2. style样式处理
-
对象语法
<div v-bind:style="{color: activeColor, fontSize: fontSize}"></div>html代码如下：
<div id="app"> <div :style="{border: borderStyle, width: widthStyle, height: heightStyle}">样式绑定</div> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { borderStyle: '1px solid blue', widthStyle: '100px', heightStyle: '100px' }, methods: { } });-
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
html代码如下：
<div id="app"> <div :style="[baseStyles, overridingStyles]">样式绑定</div> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { baseStyles: { border: '1px solid blue', width: '100px', }, overridingStyles: { height: '100px' }, methods: { } }); -
分支循环结构
1. 分支结构
-
v-if
-
v-else
-
v-else-if
html代码如下：
<div id="app">
<div v-if="score >= 90">西游记1</div>
<div v-else-if="score > 80">西游记2</div>
<div v-else>西游记3</div>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
score: 88
}
})
- v-show
html代码如下：
<div id="app">
<div>良好</div>
<div v-show="ok">测试 v-show</div>
<div style="display: none;">测试 v-show</div>
</div>
js代码如下：
const vm = new Vue({
el: '#app',
data: {
ok: false
}
});
2. v-if与v-show的区别
- v-if控制元素是否渲染到页面 判断条件为false 是不会渲染的
- v-show控制元素是否显示 控制display属性
3. 循环结构
-
v-for遍历数组
<li v-for='item in list'>{{item}}</li><li v-for='(item, index) in list'>{{item}} + '----' + {{index}}</li>html代码如下：
<div id="app"> <ul> <li v-for="item in list">{{item}}</li> <li v-for="(item, index) in list">{{item}} + '----' + {{index}}</li> </ul> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { list: ['香蕉', '苹果', '菠萝'] } }); -
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for= ''(item, index) in list'>{{item}} + '---' + {{index}}</li>html代码如下：
<div id="app"> <ul> <li :key="item.id" v-for="(item, index) in list">{{item}} + '----' + {{index}}</li> </ul> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { list: [{ id: 1, name: '香蕉' }, { id: 2, name: '苹果' }, { id: 3, name: '菠萝' },] } });综合案例如下：
html代码如下：
<div id="app"> <div>水果列表</div> <ul> <li v-for="item in fruits">{{item}}</li> </ul> <div>姓名列表</div> <ul> <li v-for="(item, index) in names">{{item}} + '----' + {{index}}</li> </ul> <div>学生列表</div> <ul> <li :key="item.id" v-for="item in students">{{item.id}} + '----' + {{item.name}}</li> </ul> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { fruits: ['apple', 'orange', 'banana'], names: ['toom', 'lily', 'mary'], students: [{ id: 1, name: '张三', }, { id: 2, name: '李四' }, { id: 3, name: '王五' }] } }); -
v-for遍历对象
<div v-for='(value, key, index) in object'></div>html代码如下：
<div id="app"> <div v-for="(value, key, index) in object">{{value + '----' + key+ '----' + index}}</div> <div v-for="(value, key, index) in object">{{value}} + '----' + {{key}}+ '----' + {{index}}</div> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { object: { id: 100, name: '神里', age: 18 } } }); -
v-if和v-for结合使用
<div v-if='value==12' v-for=’(value, key, index) in object'></div>html代码如下：
<div id="app"> <div v-if="value==18" v-for="(value, key, index) in stu">{{value + '----' + key + '----' + index}}</div> <div v-if="value==18" v-for="(value, key, index) in stu">{{value}} + '----' + {{key}} + '----' + {{index}}</div> </div>js代码如下：
const vm = new Vue({ el: '#app', data: { stu: { id: 1, name: '张三', age: 18 } });
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
