vue基礎
一、vue的編寫步驟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
//1.0與2.0是有區別的，但是
<script src="../libs/vue1026.js"></script> //1.引入的1.0的包
<script src="../libs/vue221.js"></script> //1.引入的2.0的包
</head>
<body>
<div id="app"> //引入的包一定要確定一個範圍表明這個範圍的指令都是被vue來解析
{{msg}}
</div>
</body>
<script>
//通過vue實例化一個對象，用這個對象來解析id=app中的指令
new Vue({
el:"#app", //表示vm對象將來操作的view的區域是app的這個div中的所有指令
data:{
msg:"hello world" //稱為為mvvm中的model
}
})
</script>
</html>
二、常用指令
1.插值表達式{{}}
這是數據常用的形式就是使用"Mustache"語法(雙大括弧)的文本插值，Mustache標籤將會被替代為對應數據對象msg屬性(定義在data中的值)
例如：
<span>{{mag}}</span>
對javascript表達式的支持
例如:
{{1+1}}
{{ok?"yes":"no"}} //只支持三元表達式不支持if判斷
但是只能綁定單個表達式
2.v-text和v-html的指令
共同點:都是將一個變數渲染到制定的表達式中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue1026.js"></script>
</head>
<body>
<div id="app">
{{name}}
<span v-text="name"></span>
<span v-html="name"></span>
</div>
</body>
<script src="./libs/vue221.js"></script>
<script src="./libs/vue1026.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"<span>優就業程序員</span>"
} })
</script>
</html>
輸出結果：
<span>優就業程序員</span>
優就業程序員
不同點:v-html會解析標籤而v-text則不會
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue1026.js"></script>
</head>
<body>
<div id="app">
<span v-text="name"></span>
<br />
<span v-html="name"></span>
</div>
</body>
<script src="./libs/vue221.js"></script>
<script src="./libs/vue1026.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"<h1>優就業程序員</h1>"
}
})
</script>
</html>
文章來自博客園
IT精品課程：http://xue.ujiuye.com/
「勤工儉學計劃」，給你一個真正0元學習IT技術的機會！
http://www.ujiuye.com/zt/qgjx/?wt.bd=zy35844tt
找工作太難？不是你不行，我們來幫你！
http://www.ujiuye.com/zt/jyfc/?wt.bd=zy35844tt
※使用Docker的macvlan為容器提供的橋接網路
※有哪些普通人覺得很容易實現，但卻讓程序員一籌莫展的技術？
※看直播，送大禮，我們不見不散！
TAG:IT優就業 |
※vue-cli 腳手架中 webpack 配置基礎文件詳解
※基於vue2.0 +vuex+ element-ui後台管理系統：本地調試詳細步驟
※總結：iview（基於vue.js的開源ui組件）學習的一些坑
※Vue＋VueRouter＋elememntUI＋axios 搭建後台管理系統
※PicGo—基於 electron-vue 的炫酷圖床工具
※vue項目中添加element-ui需要注意的地方
※教你使用Vue.js的DevTools來調試你的vue項目
※springboot+vue簡單的後台管理
※前後端分離「vue + .netcore 補程」之基於Vuex的許可權驗證探究
※Vue: scoped 樣式與 CSS Module 對比
※利用vue-cli一鍵搭建Vue集成環境
※Angular和Vue.js 深度對比
※Vue 源碼分析之 Observer
※vue Router在新標籤打開頁面的實踐
※dotnet core webapi＋vue 搭建前後端完全分離web架構（一）
※vueltabajo葡萄酒包裝設計
※Angular、React 當前，Vue.js 優劣幾何？
※簡單理解Vue中的nextTick
※Vue中的methods、watch、computed的區別
※《少女歌劇Revue Starlight》預約正式開啟