Vue基础语法总结大全
data属性
- v-html，v-text 采用{ {}}语法==>插值运算
v-html：它可以加标签，它会解析成html
v-text：不能加标签，如果加了，它会当作字符串展示出来
例子：
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题，可以显示++++ -->
<p v-cloak>++++++{
{
msg}}+++++</p>
<!-- 1.默认 v-text 是没有闪烁问题的 -->
<!-- 2.v-text、v-html会覆盖元素中原本的内容，不会显示“******”和“12345678” -->
<h4 v-text="msg">************</h4>
<!-- 3.v-html可以把内容当做html来显示出来,其他方式会连带标签 -->
<div>{
{
msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">12345678</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'yuyu',
msg2:'小鱼儿与花无缺'
}
})
</script>
-
v-cloak 能够解决 插值表达式闪烁的问题
并在css中设置：
[v-cloak]{
display: none;
}
让所有设置 v-cloak 的元素隐藏，当加载完毕之后，元素身上的 v-cloak 就会消失
- v-bind属性：是Vue中提供绑定属性的指令
<div id="app">
<!-- v-bind：是Vue中提供的用于绑定属性的命令 -->
<input type="button" value="按钮" v-bind:title="mytitle+'123'">
<!-- 注意：v-bind: 指令可以被简写为 :要绑定的属性 -->
<!-- v-bind中 也可以写合法的JS表达式 -->
<input type="button" value="按钮" :title="mytitle+'123'">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
mytitle:'自己定义的title'
}
})
</script>
- v-bind 自定义名字
- v-bind:id="…" 绑定id名字
- v-bind:title="…"绑定title属性
- v-bind:style="…" 绑定样式属性
- v-bind:…="…"绑定自定义属性
methods属性
<body>
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="停止" @click="stop">
<h4>{
{
msg}}</h4>
</div>
<script>
// 注意：在VM实例中，如果想要获取data中的数据，或者想要调用methods中的方法，必须通过this.数据属性名 或 this.方法名
// 来进行访问，这里的this，就表示我们new出来的VM实例对象
var vm = new Vue({
el:'#app',
data:{
msg:'猥琐发育，别浪~~~',
intervalId:null //在data上定义 定时器ID
},
methods:{
lang(){
// 箭头函数能够使内部的this和外部的this永远保持一致，解决this指向的问题
if(this.intervalId != null) return;
this.intervalId = setInterval( () => {
// 获取到头的第一个字符
var start = this.msg.substring(0,1)
// 获取到后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给this.msg
this.msg = end + start
},200)
// 注意：VM实例会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同
// 步到页面中去；【不需要考虑如何重新渲染DOM页面】
},
// 终止定时器
stop(){
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})
</script>
</body>
分析：
1、给【浪起来】按钮，绑定一个点击事件 v-on || 简写@
2、 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后 调用 字符串的substring来进行字符串的截取操作，把第一个字符串取出来，放到最后一个位置即可；
3、为了实现点击一下按钮，自动截取的功能，需要把步骤2中的代码，放到一个定时器中。
- 事件访问修饰符
使用位置：
.stop：阻止冒泡行为
.prevent：阻止默认行为
.capture：事件捕获机制，从外往里执行
.self：被修饰的元素只能通过自己来触发事件，只会阻止自己的冒泡行为，不会阻止别的元素
.once：只触发一次事件函数
<body>
<div id="app">
<!-- 使用.stop阻止向上冒泡 -->
<div class="inner" @click="yuyu">
<input type="button" value="我爱你" @click.stop="leilei">
</div>
<!-- 使用.prevent阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="love">有问题找百度</a>
<!-- 使用.captrue实现捕获触发事件的机制 -->
<div class="inner" @click.capture="yuyu">
<input type="button" value="我爱你" @click="leilei">
</div>
<!-- 使用.self实现只有点击当前元素才会触发事件处理函数 -->
<div class="inner" @click.self="yuyu">
<input type="button" value="我爱你" @click="leilei">
</div>
<!-- 使用.once只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="love">有问题找百度</a>
<!-- .stop 和 .self的区别 -->
<div class="yulei" @click="yulei">
<div class="inner" @click="yuyu">
<input type="button" value="我爱你" @click.stop="leilei">
</div>
</div>
<!-- .self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为 -->
<div class="yulei" @click="yulei">
<div class="inner" @click.self="yuyu">
<input type="button" value="我爱你" @click="leilei">
</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
yuyu(){
alert('鱼鱼');
},
leilei(){
alert('磊磊')
},
love(){
alert('I Love You')
},
yulei(){
alert('鱼鱼love磊磊')
}
}
})
</script>
</body>
- v-model（页面）（vue实例），任意一端数据发生变化时则另一端也改变
<body>
<div id="app">
<h4>{
{
msg}}</h4>
<!-- 使用v-model可以实现表单元素和Model中数据的双向绑定 -->
<!-- 注意：v-model只能运用在表单元素中 -->
<!-- input（radio，text，address，email..)select checkbox textarea -->
<input type="text" v-model="msg" style="width: 100%">
<!-- v-bind只能实现数据的单向绑定，从M自动绑定到V -->
<!-- <input type="text" v-bind:value="msg" style="width: 100%"> -->
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'v-model数据双向绑定'
}
})
</script>
</body>
操作class属性
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
<body>
<div id="app">
<!-- 第一种方式，直接传递一个数组，注意：这里的class需要使用v-bind做数据绑定 -->
<h2 :class="['red','thin','italic']">小鱼儿与花无缺</h2>
<!-- 在数组中使用三元表达式 -->
<h2 :class="['red','thin','italic',flag?'active':'']">小鱼儿与花无缺</h2>
<!-- 在数组中使用 对象来代替三元表达式，提高代码可读性 -->
<h2 :class="['red','thin','italic',{'active':flag}]">小鱼儿与花无缺</h2>
<!-- 在为class使用 v-bind 绑定对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；属性值是一个标识符 -->
<h2 :class="classObj">小鱼儿与花无缺</h2>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true,
classObj:{
red:true,thin:true,italic:false,active:true}
},
})
</script>
</body>
基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。
<body>
<div id="app">
<label>
ID:<input type="text" v-model="id">
</label>
<label>
Name:<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<!-- 循环的时候，key属性只能使用number获取string -->
<!-- key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 -->
<!-- 在组件中使用v-for循环的时候，或者在一些特殊的情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值 -->
<p v-for="item in user" :key="item.id">
<input type="checkbox">
{
{
item.name}}
</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
user:[
{
id:1,name:'yuyu1'},
{
id:2,name:'yuyu2'},
{
id:3,name:'yuyu3'},
{
id:4,name:'yuyu4'},
]
},
methods:{
add(){
this.user.unshift({
id:this.id,name:this.name})
}
}
})
</script>
</body>
v-if 和 v-show 的使用
-
v-if条件渲染指令，根据表达式的真假来添加或删除元素。其语法结构是：v-if=“expression”，其中expression是一个返回bool值的表达式，其结果可以是true或false，也可以是返回true或false的表达式。
-
也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
v-else 二选一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07Vue的常用指令v-else-if</title>
</head>
<body>
<div id="app">
<!--v-else-if-->
<p>输入的成绩对于的等级是：</p>
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 80">良好</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>
<input type="text" v-model="score">
</div>
<script_top src="js/vue.js"></script_top>
<script_top>
//通过数据操控界面
let vm = new Vue({
el:'#app',
data:{
//v-else-if.
score:50 //优秀 良好 及格 不及格
}
});
</script_top>
</body>
</html>
计算属性（computed properties）
计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。他的起因就是为了方便维护。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>初始值:{
{
name}}</p>
<!-- 表达式要产生结果即可 -->
<p>翻转值:{
{
name.split('').reverse().join('')}}</p>
<p>函数调用:{
{
revecrStr()}}</p>
<!-- 直接调用计算属性，就会直接调用get方法。 -->
<p>计算属性:{
{
reverse}}</p>
</div>
<script_top src="js/vue.js"></script_top>
<script_top>
new Vue({
el:'#app',
data:{
name:'Rosc jack'
},
methods:{
revecrStr(){
//函数
return this.name.split('').reverse().join('');
},
},
//计算选项
computed:{
// get方法 计算属性
// 直接调用计算属性，就会直接调用get方法。
reverse(){
return (this.name.split('').reverse().join(''));
}
}
})
</script_top>
</body>
</html>
计算属性 和 Methods的区别？
当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；而method，就是当页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method。
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter （笔者也不是特别理解）
局部组件和全局组件
//局部组件
<div id="app">
<my-test msg="你好"></my-test>
<my-test msg="传值2"></my-test>
</div>
//js
new Vue({
el:"#app",
components:{
'my-test':{
props:['msg'],
template:'{
{msg}}'
}
}
})
//全局组件
<div id="app">
<my-test msg="你好"></my-test>
<my-test msg="传值2"></my-test>
</div>
//js
Vue.component('my-test',{
props:['msg'],
template:'{
{msg}}'
})
利用props进行传值
//html
<div id="app">
<my-test v-bind:listData="list"></my-test>
</div>
//js
new Vue({
el:"#app",
data:{
list:[
{
title:'这是数据'},
{
title:'这是数据22'}
]
},
components:{
'my-test':{
props:['listData'],
template:`
<select name="" id="">
<option v-for="item in listData">{
{
item.title}}</option>
</select>
`
}
}
})
如果需要传的值在vue的实例中
vue中的变量
-
var 是函数级作用域，let是块级作用域
例子：
{
let n = 10;
var m = 1;
}
结果：n // 会报错：ReferenceError:a is not defined.
结果：m // 1
- let不允许在相同作用域内，重复声明同一个变量
- const声明一个只读的常量,且声明后，常量的值是不能改变的，只能在声明的位置后面使用