vue.js入门之第二篇(语法)
2018-10-01 本文已影响128人
平安喜乐698
目录
1. 语句
条件语句（v-if 指令 true则插入该元素）
if
<div id="app">
<div v-if="ok">
<h1>Hello World</h1>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
if else
<div id="app">
<div v-if="ok">
<h1>Hello World</h1>
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
if elseif else
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type : 'D',
}
})
</script>
循环语句 ( v-for 指令，遍历数组、字典)
v-for 的优先级比 v-if 更高(当它们处于同一节点)，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
迭代数组
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
迭代字典
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '张三',
url: 'http://www.baidu.com',
slogan: '到！'
}
}
})
</script>
迭代整数
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
key
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
2. 计算属性
为什么使用计算属性：
举例：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
1、{{}} 在模板中放入太多的逻辑会让模板过重且难以维护。
2、不方便复用
对于任何复杂逻辑，应当使用计算属性。
为什么不使用methods方法：
1、方法总会重新执行。
2、computed只有在发生改变时才会重新取值。
computed默认只有 getter ，可以手动添加setter。
举例：反转字符串
=》原代码逻辑（未使用计算属性）
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
=》使用计算属性
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
举例：添加setter方法
<div id="app">
<p>{{ site }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'helloWorld http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
3. 监听属性
使用 见示例
示例1
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
// 监听counter属性
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
示例2（在2个地方都进行了监听）
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>
Vue.set、Vue.delete
1、Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。
2、Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。
添加或删除对象属性
Vue.set( target, key, value )
Vue.delete( target, key )
示例
<div id = "app">
<p style = "font-size:25px;">计数器: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
Vue.delete(myproduct, 'price');
console.log(vm);
<!--使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应-->
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
4. {{支持JavaScript 表达式}}
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">Hello</div>
<p>{{ message }}</p> 数据绑定
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
5. 过滤器
方式一：
<!-- 在两个大括号中 -->
{{ message | filterA }}
{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2) }}
方式二：
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
示例（对输入的字符串第一个字母转为大写）
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
6. 计时器
2s后执行
<script>
setTimeout(
function(){
vm.counter = 0;
},2000
);
</script>
7. 混入
1、Vue对象可复用混入对象的所有 方法、计算属性 等。
2、混入对象可以包含任意组件选项。
示例1（局部混入）
var mixin = {
created: function () {
document.write('混入调用' + '<br>')
}
}
new Vue({
mixins: [mixin],
created: function () {
document.write('组件调用' + '<br>')
}
});
输出：
混入调用
组件调用
示例2（局部混入）
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
// 定义一个混入对象
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write("helloWorld");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
示例3（全局混入）
一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
示例（和混入中方法名相同时）
var mixin = {
methods: {
samemethod: function () {
document.write('Mixin：相同方法名' + '<br>');
}
}
};
var vm = new Vue({
mixins: [mixin],
methods: {
samemethod: function () {
document.write('Main：相同方法名' + '<br>');
}
}
});
vm.samemethod(); // Main：相同方法名
当混入对象和组件含有同名选项时
对于数据：
不同者合并
相同者以组件优先
方法：
不同者合并
相同者
对于methods 中的方法：组件优先级高，覆盖
对于methods 外的方法：合并
数组
会改变原数组
push() 添加元素
pop() 删除元素
shift()
unshift()
splice()
sort()
reverse()
例
vm.items.push({ message: 'Baz' })
不会改变原数组，会返回新书组
filter()
concat()
slice()
例
vm.items.filter(function (item) {
return item.message.match(/Foo/)
})
注意
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
1、通过索引设置项，例如：vm.items[indexOfItem] = newValue
2、修改数组长度，例如：vm.items.length = newLength
以下两种方法可解决问题1
// Vue.set
// 等价vm.$set(vm.items, indexOfItem, newValue)
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
以下方法可解决问题2
vm.items.splice(newLength)
由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。
可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
// 等价vm.$set(vm.userProfile, 'age', 27)
Vue.set(vm.userProfile, 'age', 27)
添加多个属性
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
