vue框架使用-js框架

一、摘要

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