本內容為系列內容，全部內容請看我的vue教程分類
vue定義數據
還記得前面說的mvvm的 model層嗎?也就是數據層
在vue中我們如何定義我們需要使用到的數據呢
<script>
let vm = new Vue({
el: '#app',
data() {
return {
// 定義字符串
name: 'lili',
// 定義數字
age: 1,
// 定義對象
user: { name: 'lookroot', age: 20 },
// 定義數組
userlist: [
{ name: 'lookroot', age: 20 },
{ name: 'lili', age: 21 }
]
}
},
})
</script>
在這個data中進行定義，那有人會疑惑為啥這個data是個函數啊，為啥不是直接就是個對象，這個點的話要后面才能體會到，我先簡單說一下，因為vue組件化開發，每個組件都會有一個data屬性，如果直接定義為一個對象的話，后面的全都是這一個data了，這個數據變化就會影響到其他的組件
那么我們這里定義好了數據，怎么知道它到底定義好了沒有啊
這里提供兩個方式
-
vue dev-tools插件
打開頁面中的插件
-
在生命周期里面調用來試一試
我們還是使用上面的 created這個周期，這里通過 this指向我們就可以得到vue實例中的data數據，大家還記得這個this指向吧，這里的 this指向就是 vue實例
created() {
console.log(this.name);
console.log(this.age);
console.log(this.user);
console.log(this.userlist);
},
重新運行項目查看控制台，這里就已經把數據打印出來了
vue渲染展示數據
上面我們已經定義好了相關的數據，那你說定義了咋用啊
這一節我們就來講vue的數據渲染，我們還是使用上一節定義好的數據
<script>
let vm = new Vue({
el: '#app',
data() {
return {
// 定義字符串
name: 'lili',
// 定義數字
age: 1,
// 定義對象
user: { name: 'lookroot', age: 20 },
// 定義數組
userlist: [
{ name: 'lookroot', age: 20 },
{ name: 'lili', age: 21 }
],
}
},
})
</script>
然后我們來到html頁面中編輯，還記得之前說的嗎 所有的頁面都要放到#app容器里面
我們在頁面中展示在data中定義的數據使用文本插值的方式用{{}}包裹
首先展示基本數據類型
直接用{{}}包裹住剛剛在data中定義的數據就可以了
<div id="app">
<!-- 文本插值的方式 -->
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<h2>{{user}}</h2>
</div>
打開瀏覽器看看效果，字符串和數字都能展示
展示對象
但是這個user對象這樣展示肯定是不行的怎么辦呢？在{{}}里面能直接使用對象的屬性，因為里面是支持JavaScript的語法的，比如我們再添加兩個
<h2>{{user.name+'-'+user.age}}</h2>
<h2>{{1+1}}</h2>
<h2>{{'lookroot'.split('').reverse().join('')}}</h2>
瀏覽器查看效果
v-for遍歷
剛剛這個userlist它是個數組應該怎么展示了，大家有人肯定會這樣想，其實這樣是能展示的，但是幾十幾千條數據呢?
<ul>
<li>{{userlist[0].name+'-'+userlist[0].age}}</li>
<li>{{userlist[1].name+'-'+userlist[1].age}}</li>
</ul>
但是這里要用到非常重要的一個點v-for循環
再次在頁面中添加內容,這里的意思就是把這個userlist循環為li列表，我們在li節點上使用 v-for,括號里面的值第一個是循環出來的對象，第二個值是索引，然后在后面的{{}}里面我們就能像上面展示對象的方式來使用循環出來的對象的數據了
這里還有一個 :key這個是為了保證當前循環列的唯一性，操作了數據后，頁面會重排，后面會詳細講到
<ul>
<li v-for="(user,index) in userlist" :key="index">{{user.name+'-'+user.age}}</li>
</ul>
這個使用其實是非常靈活的，還可以迭代數字
<div v-for="id in 10">{{id}}</div>
還可以遍歷對象，比如上面的 user對象,第一個是值 第二個是鍵 第三個是索引
<!-- 遍歷對象 -->
<div v-for="(value,key,index) in user">
{{index}}- {{key}}-{{value}}
</div>
打開瀏覽器看看效果
原生的html
剛剛我們在data定義的數據都是規范的數據類型，那么萬一我要定義一個這樣的字符串
data() {
return {
// 定義一個原生html
userhtml: '<h2>lili</h2>'
}
},
頁面中該如何渲染呢？如果直接使用 {{}}效果是這樣的，這肯定不是我們想要的效果，我們要的是把它渲染為一個 h2標簽
這里就應該使用 v-html
<div v-html="userhtml"></div>
再次查看效果
