Vue入门

vue2.5入门
挂载点 ， 模板， 实例
数据data
{{}}差值表达式
指令v-

绑定事件

v-on:可以简写为@

    <div id="root" v-on:click="handle">{{msg}}</div>
    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "点我"
            },
            methods: {
                handle: function(){
                    alert("hahaha");
                }
            }
        })    
    </script>

绑定属性

v-bind:简写为:

   <div id="root" v-bind:title="title">{{msg}}</div>
    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "hahaha",
                title: "kanwo"
            }
        })    
    </script>

双向数据绑定

v-model

   <div id="root">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                message: "hahaha"
            }
        })    
    </script>

计算属性与侦听属性

computed watch

    <div id="root">
       姓 <input v-model="firstName">
       名 <input v-model="lastName">
        <p>全名: {{ fullName }}</p>
        <div>{{count}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
                count: 0
            },
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            watch: {
                fullName: function(){
                    this.count++
                }
            }
        })    
    </script>

v-if, v-show与v-for指令

v-if改变的是html元素是否存在
v-show改变的是css。display
v-for循环展示数据。v-for 指令可以绑定数组的数据来渲染一个项目列表

   <div id="root">
        <div v-if="show">{{msg}}</div>
        <button @click ='handleClick'>toggle</button>
        <ul>
            <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                msg: '可见可不见',
                show: 'ture',
                list: [0,1,2,3]
            },
            methods: {
                handleClick:function(){
                    this.show = !this.show;
                }
            }
          )}
      </script>

组件

全局注册

Vue.component('my-component-name', {
  // ... options ...
})

vue是由一个个实例构成的。
vue的每个组件都是一个实例。

父子通信，可以通过属性的方式进行传值。

vue-cli

//全局安装vue-cli
npm install vue-cli -g
//初始化一个基于webpack的vue项目
vue init webpack file
//进入文件夹
cd file
// 启动项目
npm run dev

脚手架工具，单页面应用
可以大胆的使用es6语法
单文件，组件封装