一、模板语法及数据绑定
- 模板:整个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>