一、模板語法及數據綁定
- 模板:整個html框架就是一個模板,vue中用template來表示html。
- 語法:
//1、文本插值(使用雙大括號的形式)
<div id="app">
<p>{{ message }}</p>
</div>
//2、綁定部分HTML(不推薦)
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>dd教程</h1>'
}
})
</script>
//3、綁定標籤的css屬性(需使用v-bind命令)
<div id="app">
<label for="r1">修改顏色</label>
<input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
//4、綁定表單 v-model(若要提交後觸發改變用lazy修飾)
<div id="app">
<p>input 元素:</p>
<input v-model="message" placeholder="編輯我……">
<p>消息是: {{ message }}</p>
<p>textarea 元素:</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本輸入……"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'noob',
message2: 'http://www.noob.com'
}
})
</script>
二、 條件:(展示某個標籤中的內容)
//1、v-if v-else v-else-if
<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>
//2、v-show
<h1 v-show="ok">Hello!</h1>
三、循環:
//1、
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
四、事件
//1、點擊
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
//2、監聽
<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
}
});
vm.$watch('counter', function(newval, oldval) {
alert('計數器值的變化 :' + oval + ' 變爲 ' + nval + '!');
});
</script>
五、組件(Component)
//1、自定義局部組件
<div id="app">
<child></child>
</div>
<script>
var Child = {
template: '<h1>自定義組件!</h1>'
}
// 創建根實例
new Vue({
el: '#app',
components: {
// <runoob> 將只在父模板可用
'child': Child
}
})
</script>
//2、自定義全局組件
<div id="app">
<noob></noob>
</div>
<script>
// 註冊
Vue.component('noob', {
template: '<h1>自定義組件!</h1>'
})
// 創建根實例
new Vue({
el: '#app'
})
</script>
六、過濾
/1、局部過濾器 實例化之後註冊
let app = new Vue({
el: '#app',
data () {
return {
name: 'w3cplus.com'
}
},
// 聲明一個本地的過濾器,過濾其必須在聲明實例之後寫
filters: {
Upper: function (value) {
return value.toUpperCase()
}, Lower: function (value) { return value.toLowerCase() }
}
})
<div id="app"> <h1>{{ name | Upper }}</h1> </div>
/2、全局過濾器 實例化之前註冊
<div id="app">
<!-- 首字符串大寫 -->
<div>首字母大寫過濾器:{{str | upcase}}</div>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
//全局方法 Vue.filter()註冊一個自定義過濾器,必須放在Vue實例化前面
// 註冊一個首字母大寫的過濾器
Vue.filter("upcase", function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
}
});
</script>