<script src="js/vue.js"></script>
<body>
<div id="app">
<div>{{msg}}</div>
<!-- 輸出Hello world vue -->
<div>{{1+2}}</div>
<!-- 數(shù)字類型的自動(dòng)相加篮绿，輸出3 -->
<div>{{msg+'----'+123}}</div>
<!-- 字符串拼接，輸出Hello world vue----123 -->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello world vue"
}
});
</script>
vue之Hello world的步驟：
1，需要提供使用的標(biāo)簽
2，引入vue.js文件
3外潜，可以使用vue的語(yǔ)法做功能
4，把vue提供的數(shù)據(jù)填充到標(biāo)簽中
el是指元素掛載位置(值是css選擇器或者dom元素)
data是模型數(shù)據(jù)
{{msg}}是差值表達(dá)式挠唆，填充到html里处窥，進(jìn)行前端渲染
vue代碼運(yùn)行原理，vue代碼--->vue框架--->原生js
什么是vue的指令玄组？
自定義屬性就是vue的指令滔驾。
v-cloak解決“閃動(dòng)”問(wèn)題谒麦。
<style type="text/css">
[v-cloak]{
display:none
}
</style>
<div id="app">
<div v-cloak>{{msg}}</div>
<!-- 輸出Hello world vue -->
</div>
<script>
/*
v-cloak指令的用法
1，提供樣式
[v-cloak]{
display:none
}
2哆致，在差值表達(dá)式所在的標(biāo)簽中添加v-cloak指令
原理：先通過(guò)樣式隱藏內(nèi)容绕德，然后在內(nèi)存中進(jìn)行值的替換，替換好之后再顯示最終的結(jié)果摊阀，解決了“閃動(dòng)”問(wèn)題
*/
var vm = new Vue({
el: "#app",
data: {
msg: "Hello world vue"
}
});
</script>
v-text迁匠，v-html，v-pre它們的作用和區(qū)別是什么驹溃？
v-text的作用和差值表達(dá)式一樣，更簡(jiǎn)潔一些延曙，不存在“閃動(dòng)問(wèn)題”豌鹤，推薦使用v-text而不推薦使用差值表達(dá)式。
v-html的作用是能直接渲染出html的樣式枝缔，但是很不安全布疙，慎重使用，容易遭到xss跨站腳本攻擊愿卸；本網(wǎng)站內(nèi)部數(shù)據(jù)可以使用灵临，第三方數(shù)據(jù)不能使用。
v-pre的作用是能渲染出html原始信息趴荸，不進(jìn)行編譯儒溉。
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<!-- 輸出結(jié)果是Hello world vue -->
<div v-html='msg1'></div>
<!-- 輸出h1標(biāo)簽大小的HTML字符串 -->
<div v-pre>{{msg}}</div>
<!-- 輸出{{msg}} -->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello world vue",
msg1:'<h1>HTML</h1>'
}
});
什么是vue的數(shù)據(jù)響應(yīng)式？什么是vue的數(shù)據(jù)綁定发钝？
html5中的響應(yīng)式指屏幕尺寸變化導(dǎo)致樣式變化顿涣，vue的數(shù)據(jù)響應(yīng)式指數(shù)據(jù)變化導(dǎo)致頁(yè)面內(nèi)容變化。
v-once的作用和應(yīng)用場(chǎng)景是什么酝豪？
v-once只編譯一次涛碑，顯示內(nèi)容后不再具有數(shù)據(jù)響應(yīng)式。對(duì)于某些不需要修改的數(shù)據(jù)來(lái)說(shuō)孵淘，使用v-once能提高性能蒲障，因?yàn)椴恍枰O(jiān)聽(tīng)它的變化。
v-model數(shù)據(jù)雙向綁定的作用和應(yīng)用場(chǎng)景是什么瘫证？
v-model數(shù)據(jù)雙向綁定主要用于input輸入框揉阎，無(wú)論是修改輸入框里的內(nèi)容還是data模型數(shù)據(jù)里的數(shù)據(jù)，都會(huì)產(chǎn)生變化背捌。代碼如下余黎，核心代碼是v-model='msg'，綁定了data中的msg
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model='msg'>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello world vue"
}
});
vue事件綁定的基本用法是什么载萌？
使用v-on進(jìn)行事件綁定惧财，點(diǎn)擊按鈕使其加1巡扇。
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click='num++'>點(diǎn)擊</button>
<button @click='handle'>點(diǎn)擊2</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
handle: function () {
this.num++;
}
}
});
</script>
當(dāng)業(yè)務(wù)量增加的時(shí)候，所有的事件處理寫(xiě)在一起效率很低垮衷，維護(hù)困難厅翔，因此可以把事件寫(xiě)在methods里，調(diào)用methods里的方法時(shí)搀突，直接調(diào)用函數(shù)名或者直接調(diào)用函數(shù)刀闷。
簡(jiǎn)單的加法計(jì)算器，原理為數(shù)據(jù)雙向綁定和事件綁定
樣式部分：
<div id="app">
<h1>簡(jiǎn)單計(jì)算器</h1>
<div>
<span>數(shù)值A(chǔ):</span>
<span>
<input type="text" v-model='a'>
</span>
</div>
<div>
<span>數(shù)值B:</span>
<span>
<input type="text" v-model='b'>
</span>
</div>
<div>
<button v-on:click='handle'>計(jì)算</button>
</div>
<div>
<span>計(jì)算結(jié)果:</span>
<span v-text='result'></span>
</div>
</div>
邏輯部分：
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function(){
// 實(shí)現(xiàn)計(jì)算邏輯
this.result = parseInt(this.a) + parseInt(this.b);
}
}
});
vue屬性綁定仰迁，可以動(dòng)態(tài)的修改url屬性甸昏，默認(rèn)百度url，點(diǎn)擊切換后再點(diǎn)擊a標(biāo)簽跳轉(zhuǎn)到淘寶徐许，因?yàn)樾薷牧藆rl地址
<div id="app">
<a v-bind:href="url">默認(rèn)百度</a>
<button v-on:click="handle">切換淘寶</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
url:'https://www.baidu.com'
},
methods: {
handle: function(){
// 修改url地址
this.url = 'https://www.taobao.com'
}
}
});
