一、摘要
vue是javascript框架,构建用户界面的渐进式框架-可以使用h5(公众号)-类似(jquery)
特性:响应式的数据绑定,组合视图组件
使用:方便,简洁
二、运算符
1.运用标签内容
{{}}单纯文本,属性或者方法返回值
eg:<div id="app"> <p>{{ message }}</p> </div>
2.运用标签内部
v-html=""标签
v-bind:href= (:href) class style 用于修改属性值
v-on:click=(@click=) 点击事件
v-model 运用input select text checkbox radio控制元素上创建双向数据绑定
v-if=""判断
v-for="site in sites"
watch监听属性
三、使用
1.引用
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
2.使用
1、响应式
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
eg:http://119.23.111.40/test/vue/1
2、input
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>
<script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>
eg:http://119.23.111.40/test/vue/2
3、事件+watch
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我<tton>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
eg:http://119.23.111.40/test/vue/3
四、例子
1.购物车
<div id="app">
<table>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="iphone in Ip_Json">
<td>{{ iphone.id }}</td>
<td>{{ iphone.name }}</td>
<td>{{ iphone.price }}</td>
<td>
<button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-<tton>
{{ iphone.count }}
<button v-on:click="iphone.count+=1">+<tton>
</td>
<td>
<button v-on:click="iphone.count=0">移除<tton>
</td>
</tr>
</table>
总价:${{totalPrice()}}
</div>
http://119.23.111.40/test/vue/3
备注:动画效果,组件
学习地址
http://www.runoob.com/vue2/vue-forms.html