Vue基础知识01-基本使用方法

Vue的基本使用

创建Vue实例

1.引包

// 引入vue.js的CDN地址
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
// 或者下载vue包后引入vue.js的本地地址
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

2.新建Vue实例
Step 1：html中插入根元素

，id为"app"

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

Step 2：script中创建实例化对象 mv

    var mv = new Vue({
        el:"#app" // 指定实例化的DOM的ID号
    })

数据绑定

即，将Vue实例中的数据渲染到DOM中，此时的数据流向是单向的（Vue -> DOM // Data -> View）
1.在创建的数据声明中写入数据声明data

        var mv = new Vue({
            el:'#app', //目的地
            data:{ 
                // 可以是对象/函数
                msg: "test",
                isTrue:1==1
            },
        });

2.在标签中绑定数据: 使用“Mustache”语法 (双大括号) 的文本插值

<div id="app">Message: {{ msg }}</div>

注：双大括号 中的内容是作为变量形式出现的，因此也可以写为

        <span>{{msg}}</span>
        <span>{{1+1}}</span>
        <span>{{isTrue}}</span>
        <span>{{1>2 ? '真' : '假'}}</span>

（记住都得放在根元素中）

部分实例属性

• vm.$data Vue实例观察的数据对象，访问原始数据对象data
  （vm.a===vm.$data.a // => true）
• vm.$props 当前组件接收到的 props 对象。
• vm.$el Vue实例使用的根 DOM 元素。
• vm.$slots 用来访问被插槽分发的内容。 (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)
• vm.$options 用于当前Vue实例的初始化选项，需要在选项中包含自定义属性时会有用处。
• vm.$root 当前组件树的根Vue实例。如果当前实例没有父实例，此实例将会是其自己。
• vm.$emit( eventName, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。

Vue的指令系统

部分指令

• v-text 更新元素的 textContent。

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

• v-html 更新元素的 innerHTML 。注意：内容按普通 HTML 插入

<div v-html="<h1>Hi!<h1>"></div>

• v-show 根据表达式之真假值，切换元素的 display CSS 属性。
• v-if 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
• v-else 前一兄弟元素必须有 v-if 或 v-else-if。
• v-for 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名。

<div v-for="item in items">
  {{ item.text }}
</div>

• v-on 绑定事件监听器。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

语法：v-on:原生事件名="函数名/js代码" 缩写：:@原生事件名="函数名/js代码"

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>

// 需要在`methods` 对象中定义函数方法
var vm = new Vue({
    el: '#example-2',
    data: {
    name: 'Vue.js'
    },
    methods: {
        // fun为函数名
        fun: function (event) {
            // `this` 在方法里指向当前 Vue 实例
            alert('Hello ' + this.name + '!')
        }
    }
})
// 也可用js代码直接调用方法
vm.fun()

• v-bind 动态地绑定标签上的属性(内置属性/自定义属性)，或一个组件 prop 到表达式。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>

• v-model 在表单控件或者组件上创建双向绑定。

select 字段将 value 作为 prop 并将 change 作为事件。

• v-slot 插槽

Vue的双向数据绑定

(Vue <-> DOM // Data <-> View)
利用v-model，本质上是个语法糖,是v-bind:value + v-on:input的体现。
（简单的说，v-model后跟的变量，在Vue和DOM之间是保持同步的）

text 和 textarea 元素使用 value 属性和 input 事件；

<!-- 接收input的value值为变量message，并传给Vue -->
<input v-model="message" placeholder="edit me">
<!-- 用Vue中的message向{{ }}内插值 -->
<p>Message is: {{ message }}</p>

checkbox 和 radio 使用 checked 属性和 change 事件；

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

局部组件的创建

共三步，声明 -> 挂载 -> 使用
Step 1：组件声明

        var App = {
            data:{},
            methods:{},
            template:''
        }

Step 2：组件挂载

        var vm = new Vue({
            el:'#app',
            data:{},
            // 挂载子组件
            components:{
                App
            },
            template:''
        })

Step 3：组件使用

        var vm = new Vue({
            el:'#app',
            data:{},
            // 挂载子组件
            components:{
                App
            },
            // 父组件直接可使用
            template:`<App></App>`
        })

全局组件的创建

全局组件与局部组件的创建类似，因为全局组件是挂载在Vue根元素上的，所以可写成

        Vue.component('Vbtn',{
            template:`
                <button>按钮</button>
            `
        });

相当于在Vue的component属性中直接写上组件声明，省去挂载步骤。全局组件的使用与局部组件一致。

父组件向子组件通信

父组件=>子组件 共三步：
1. 先给父组件中绑定自定义的属性(挂载)
2. 在子组件中使用props接受父组件传递的数据(props)
3. 在自组件中任意使用父组件传递的数据

Step 0：定义两个组件Parent和Child，父组件中有数据msg。

        // Child组件（全局）
        Vue.component('Child',{
            template:`
                <div>
                    <p>我是子组件</p>
                </div>
            `
        })
        // Parent组件（全局）
        Vue.component('Parent',{
            data:{
                msg:'我是父组件的数据 Hi'
            },
            template:`
                <div>
                    <p>我是父组件</p>
                </div>
            `
        })
        // Parent组件（局部）
        var App = {
            template:`
            <div>
                <Parent/>
            </div>
            `
        };
        // Vue实例
        new Vue({
            el:'#app',
            data:{},
            components:{
                App
            },
            template:'<App/>'
        })  

Step 1：先给父组件中绑定自定义的属性(挂载)，设置Child组件的childData属性值为"msg"。

        Vue.component('Parent',{
            data(){
                return{
                    msg:'我是父组件的数据 Hi'
                }
            },
            template:`
                <div>
                    <p>我是父组件</p>
                    <Child :childData='msg'/>
                </div>
            `
        })

Step 2：在子组件中使用props接受父组件传递的数据

        Vue.component('Child',{
            template:`
                <div>
                    <p>我是子组件</p>
                </div>
            `,
            props:['childData']
        })

Step 3：在自组件中任意使用父组件传递的数据

        Vue.component('Child',{
            template:`
                <div>
                    <p>我是子组件</p>
                    <input type="text" v-model='childData'/>
                    {{childData}}
                </div>
            `,
            props:['childData']
        })

子组件向父组件通信

子组件=>父组件 共三步：
1. 在父组件绑定自定义事件
2. 在子组件中触发原生的事件
3. 在函数中使用$emit触发自定义的childHandler

Step 1：在父组件绑定自定义事件

        // 父组件
        Vue.component('Parent',{
            data(){
                return{
                    msg:'我是父组件的数据 Hi'
                }
            },
            template:`
                <div>
                    <p>我是父组件</p>
                    <Child :childData='msg' @childEvent=' childHandler'/>
                </div>
            `,
            methods:{
                chidHandler(val){
                    console.log(val);
                }
            }
        })
        // 
        var App = {
            template:`
            <div>
                <Parent/>
            </div>
            `
        };
        //
        new Vue({
            el:'#app',
            data(){
                return{
                }
            },
            components:{
                App
            },
            template:'<App/>'
        })

Step 2：在子组件中触发原生的事件input

        // 子组件
        Vue.component('Child',{
            // 2.
            template:`
                <div>
                    <p>我是子组件</p>
                    <input type="text" v-model='childData' @input='changeValue'/>
                </div>
            `,
            props:['childData'],
            methods:{ }
            }
        })

Step 3：在函数中使用 $emit 触发自定义的childHandler

        // 子组件
        Vue.component('Child',{
            template:`
                <div>
                    <p>我是子组件</p>
                    <input type="text" v-model='childData' @input='changeValue'/>
                </div>
            `,
            props:['childData'],
            methods:{
                // 3.
                changeValue(val){
                    // 自定义的事件通过$emit()触发
                    // $emit(自定义事件名,消息)
                    this.$emit('childHandler', val)
                }
            }
        })