概述
刚接触一门编程语言或者框架，我们都应该先熟悉其基本语法，以及使用框架的基础步骤，即使你是编程高手，熟悉并且熟练使用这些语法之后，首先可以提高编码效率，其次，编码的过程中也会运用的得心应手，顺手拈来！
语法类型
学习基本语法，我们就以
<script>标签引入html文件的方式来学习，这样对学习语法更加简洁直观，后边再学习到工程化之后再利用vue-cli来创建！
1. 声明式渲染
其实就是采用的是模板语法将数据渲染进DOM!
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
通过在JS的data字段中声明message字段，然后通过{{ message }} 双大括号的形式将data中message的值渲染出来，这种方式vue官方成为声明式渲染！
Html元素的属性也可以通过vue提供的v-bind指令渲染到DOM中，这也属于声明式渲染的一类，在Vue中，所有带v-前缀的，都表示它们为Vue提供的特殊特性。
<div id="app">
{{ message }}
<span v-bind:title="spanTitle">我是一个span</span>
<img v-bind:src="imgSrc" v-bind:alt="imgAlt">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
spanTitle: '我是span标签的title属性值！',
imgAlt: '我是一个img的alt属性值',
imgSrc: 'https://cn.vuejs.org/images/logo.png'
}
})
</script>
如上例所示，我们在data中声明了 spanTitle、imgAlt 和 imgSrc三个数据，通过v-bind:指令将数据渲染进DOM！
这种声明式渲染的时候可能会因为网络卡顿，无法渲染出数据的时候会把模板语言标签直接渲染出来，或者本地刷新的时候会有一瞬间看见模板标签一闪而过的迹象，这种现象产生的原因是 Vue 尚未编译到关联实例的时候，指令还无法被解析而造成的。
Vue提供了一个v-cloak指令来解决这种闪烁问题。一般这个指令必须要配合CSS来使用！
<div v-cloak>
{{ message }}
</div>
<style>
[v-cloak] {
display: none;
}
</style>
2. 条件式渲染
Vue中的条件渲染主要指：v-if 和 v-show 两个指令！
- 用法：
<div id="app">
<div v-if="isIf === 1">
isIf为1的时候展示：{{isIf}}
</div>
<div v-else-if="isIf === 2">
isIf为2的时候展示：{{isIf}}
</div>
<div v-else>
isIf不为1或者2的时候展示：{{isIf}}
</div>
<div v-show="isShow">
当isShow为true的时候展示：{{isShow}}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isIf: 1,
isShow: false
}
});
</script>
v-if 与 v-show的区别是，v-if以条件判断是否渲染输出，后边可跟随v-else指令;而v-show则是通过控制元素的CSS的样式是否为display:none来控制数据是否显示！
在浏览器控制台中通过app.isIf = 1/2/3 app.isShow = true 的方式来控制展示的效果。
3. 列表渲染
Vue的列表渲染指的是v-for指令，其实就是循环输出，采用item in items这种语法方式对数组或者对象的选项列表进行渲染！
遍历数组
- 用法：
v-for="(item, index) in items"
其中 items 为数据源，item 为每一条数据的别名, index 是每条数据的索引，以数组为例索引即数组的下标，数组的下标总是从 0 开始！
- 例子：
<div id="app">
<ul>
<li v-for="(item, index) in items" v-if="item.isShow" v-bind:key="index">
<p>{{index}}</p>
<p>{{item.name}}</p>
<p>￥{{item.price}}</p>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
items: [
{
name: 'android',
price: '12.00',
isShow: false
},
{
name: 'js',
price: '13.00',
isShow: true
}
]
}
});
</script>
-
控制台中通过
app.items[0].isShow = true的方式，来控制第一条数据的展示!
-
控制台中通过
app.items.push()添加一条数据！
app.items.push({name: 'Vue', price: '28.00', isShow: true})
遍历对象
- 语法：
v-for="(value, key, index) in dataSource"
v-for指令遍历对象其实就是将对象(dataSource)的属性进行迭代，每一条属性有三个参数 value(属性值)、key(属性)、index(属性的索引) !
- 例子：
<div id="app">
<ul>
<li v-for="(value, key, index) in dataSource" v-bind:key="index">
<p>
{{ index }}. {{ key }}: {{ value }}
</p>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
dataSource: {
name: 'Vue',
price: '12.99',
type: 'javaScript'
}
}
});
</script>
- 为dataSource对象添加一个新字段
语法：app.dataSource.newKey = 'newKey'
这种方式虽然成功的为对象添加了一个新字段，但没有被实时渲染出来，可以通过Vue提供的另外一种方式进行添加并实时渲染！
- 实时为对象添加字段并渲染
语法：Vue.set(object, key, value)
用法：
Vue.set(app.dataSource, 'newKey', 'newKey')
- 删除对象的某个字段
语法：Vue.delete(object, Key)
用法：
Vue.delete(app.dataSource, 'name')
注意观察，与上图比较name字段已经被删除！
下面列举一下 Vue 可以检测到的变化和无法检测到的变化。
- Vue 可以检测的变化
现有数据字段的变化：item[0].isShow = true;
通过Vue.set(object, key, value)的方式添加的属性
通过Vue.delete(object, Key)的方式删除的属性
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
filter()
concat()
slice()
- Vue 无法检测到的变化
利用索引去设置新的数据时：items[indexOfItem] = newItem;
直接修改数组的长度时：items.length = newLength;
直接去添加或删除对象的属性：app.dataSource.newKey = 'newKey'
感谢您的阅读，如果对您有帮助，欢迎关注"CRMEB"。码云上有我们开源的商城项目，知识付费项目，均是基于PHP+vue+mysql开发，学习研究欢迎使用，老铁顺手点个star呗，老板会奖励我5毛，分你0.25，????????关注我们保持联系！
最后
以上就是俊逸小丸子为你收集整理的② Vue基础语法（上）【vue学习笔记】语法类型的全部内容，希望文章能够帮你解决② Vue基础语法（上）【vue学习笔记】语法类型所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复