Vue 使用

Vue 入门示例

1. 数据绑定

html

<div id="app">
    <h3>{{ msg }}</h3>
    <input type="text" v-model="msg">
</div>

JS

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue'
    }
});

这样，你改变 input 框的内容，h3 里面的信息也跟着改变，实现了数据的双向绑定

2. 列表展示

此例子实现了列表的循环展示
html

<div id="app">
    <ul>
        <li v-for="row in lists">{{ row.title }}</li>
    </ul>
</div>

JS

var vm = new Vue({
    el: '#app',
    data: {
        lists: [
            {id: 1, title: 'aa'},
            {id: 2, title: 'bb'},
            {id: 3, title: 'cc'}
        ]
    }
});

3. method 方法绑定

此例子实现元素绑定事件
html

<div id="app">
    <h3>{{ count }}</h3>
    <button @click="setCount">Click</button>
</div>

JS

var vm = new Vue({
    el: '#app',
    data: {
        count: 1
    },
    methods: {
        setCount: function() {
            this.count += 1;
        }
    }
});

4. class 绑定

html

<div id="app">
    <span :class="['classA', {classB: isB, classC: isC}]">Hello</span>
</div>

JS

var vm = new Vue({
    el: '#app',
    data: {
        isB: true,
        isC: false
    }
});

这样查看源文件，可以看到 span 元素上面绑定了 classA 和 classB， 由于 isC 是 false ，所以 classC 是没有绑定到上面
如果直接是样式名称的话，用单引号引起来，直接输出

4. 条件渲染 v-if v-show

html

<div id="app">
    <h1 v-if="showMessage">Message</h1>
    <h2 v-show="showTitle">Title</h2>
</div>

JS

var vm = new Vue({
    el: '#app',
    data: {
        showMessage: true,
        showTitle: false
    }
});

可以将 showMessage 和 showTitle 的值修改查看效果

5. 表单控件绑定

使用 v-model 绑定表单控件
html

<div id="app">
    <input type="text" v-model="name">
    <input type="text" v-model="email">
    <input type="checkbox" v-model="gender" value="Male">
    <pre>
        {{$data|json}}
    </pre>
</div>

JS

var vm = new Vue({
    el: '#app',
    data: {
        name: '',
        email: '',
        gender: ''
    }
});

6. 组件

基本用法

html

<div id="app">
    <hello></hello>
</div>

JS

var Hello = Vue.extend({
    template: 'hello'
});
var vm = new Vue({
    el: '#app',
    data:{},
    components: {
        'hello': Hello
    }
});

使用 template 标签

html

<div id="app">
    <hello></hello>
    <template id="hello">
        <h1>Hello</h1>
    </template>
</div>

JS

var Hello = Vue.extend({
    template: '#hello'
});
var vm = new Vue({
    el: '#app',
    data:{},
    components: {
        'hello': Hello
    }
});

使用 props 传递参数

html

<div id="app">
    <hello msg="Vue" :lists="users"></hello>

    <template id="hello">
        <h1>Hello {{ msg }}</h1>
        <ul>
            <li v-for="row in lists">{{row}}</li>
        </ul>
    </template>
</div>

JS

var Hello = Vue.extend({
    template: '#hello',
    props: ['msg', 'lists']
});
var vm = new Vue({
    el: '#app',
    data:{
        users: ['aa', 'bb', 'cc']
    },
    components: {
        'hello': Hello
    }
});

上面展示了父级参数 msg users 的传递，msg 是静态变量，而 lists 是动态取自父级 users，所以在绑定到标签上面时前面有冒号，
props 默认是单向绑定，父级发生变化时，子组件也会发生变化，而当子组件发生变化时，父组件是不会发生变化的
不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

7. slot

单个 slot

html

<!-- hello template -->
<div>
  <h1>This is my component!</h1>
  <slot>
    如果没有分发内容则显示我。
  </slot>
</div>

<!-- hello 组件 -->
<hello></hello>
<hello>
  <p>Hello Vuejs</p>
</hello>

上面组件的解析结果是：

<div>
    <h1>This is my component!</h1>
    如果没有分发内容则显示我。
</div>
<div>
    <h1>This is my component!</h1>
    <p>Hello Vuejs</p>
</div>

第一个组件没有内容，默认显示 slot 中的内容
第二个组件中有内容，就用内容替换 slot 标签

有名字的 slot

有的组件比较复杂，会出现多个需要替换的地方，而且中间还有其他的标签内容，这样就会用到命名的 slot
html

<div class="dialog">
    <div class="header">
        <slot name="header"></slot>
    </div>
    <div class="body">
        <slot name="body"></slot>
    </div>
    <div class="footer">
        <slot name="footer"></slot>
    </div>
</div>

<hello>
    <slot name="header">
        <h1>Header</h1>
    </slot>
    <slot name="body">
        <p>this is body</p>
    </slot>
    <slot name="footer">Footer</slot>
</hello>

8. computed

html

<div id="app">
    <input type="text" v-model="like">
    <button>{{like}}</button>
    <button>{{dislike}}</button>
</div>

JS

var vm = new Vue({
    el: '#app',
    data: {
        like: 10,
        dislike: 10
    },
    computed: {
        dislike: function() {
            this.like -= 20;
        }
    },
    methods: {
        dislike: function() {
            this.dislike -= 1;
        }
    }
});

dislike 这个属性值是根据 like 这个值计算出来的，试着改变 like 的值，观察下 dislike 的变化

9. watch

用于观察 vue 上面数据的变化，当你想监控某个属性值在执行过程中的变化，可以使用 watch

10. filters

用于筛选数据，返回符合筛选条件的数据

11. 常用插件

1. vue-router 路由插件
2. vue-resource ajax
3. vue-validator 验证插件
4. vuex 数据管理

©版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 & 作者信息。

End