1.文本渲染

v-text：更新元素的innerText
v-html：更新元素的innerHTML
v-once：静态插值
v-pre：原格式输出
v-cloak：指令保持在元素上直到关联实例结束编译

<template>
     <!--定义一个容器 id="app"-->
    <div id="app1">
        <div id="app11">
            这里是app1
            hello：{{ name }}  and {{age}}<!--获取变量 name Mustache语法 两个花括号 -->
        </div>
        <div id="app12">
            <div>{{message}}</div>
            <div v-text="message1"></div>
            <div v-html="message2"></div>
            
            <div v-once="message3"></div>
            <div v-pre>{{message4}}</div>
            <div v-cloak>{{message5}}</div>
            
        </div>
    </div>
    
</template>

<script>
    var person={name:'tom',age:19,
                message:'文本渲染',
                message1:'this is <i>v-text</i>',
                message2:'this is  <i>v-html</i>',
                message3:'this is <i>v-once</i>',
                message4:"文本渲染",
                message5:"文本渲染5"}
    export default {
        data(){
            return person
        },
        
    }
</script>

<style>
</style>

显示结果

v-text和{{}}类似，只是用来渲染文本内容
v-html和innerHTML非常相类，可以将HTML元素渲染；
v-once这个指令，只能执行一次，所以当数据改变时，插值处的内容不会更新，所以称为静态插值；
v-pre，这个指令可以在模板中跳过vue的编译，直接输出原始值，也就是不会再输出vue中的data值了，而是直接显示。
v-cloak指令，经常和css一起使用，可以用来隐藏为编译的插值直到实例编译结束，在上面的例子中，若不设置v-cloak样式为隐藏，则会在结束编译之前，一直显示为；

属性绑定 v-bind:属性名=“值”

<template>
     <!--定义一个容器 id="app"-->
    <div id="app1">
        <div id="app11">
            这里是app1
            hello：{{ name }}  and {{age}}<!--获取变量 name Mustache语法 两个花括号 -->
        </div>
        <div id="app12">
            <div>{{message}}</div>
            <div v-text="message1"></div>
            <div v-html="message2"></div>
            
            <div v-once="message3"></div>
            <div v-pre>{{message4}}</div>
            <div v-cloak>{{message5}}</div>
        </div>
        <div id="app13">
            <div v-bind:title="property1"></div>
            <div :title="property2"></div>
            <div id="app131" :style="property3"></div>
        </div>
        
    </div>
    
</template>

<script>
    var person={name:'tom',age:19,
                message:'文本渲染',
                message1:'this is <i>v-text</i>',
                message2:'this is  <i>v-html</i>',
                message3:'this is <i>v-once</i>',
                message4:"文本渲染",
                message5:"文本渲染5",
                property1:"aaa",
                property2:"bbb",
                property3:"border:1px red solid"}
    export default {
        data(){
            return person
        },
        
    }
</script>

<style>
    #app131{
        width: 800px;
        height: 100px;
    }
    
</style>

属性修改

属性修改可以传正常值，也可以传数组，三目运算，以及对象

<template>
     <!--定义一个容器 id="app"-->
    <div id="app1">
        <div id="app11">
            这里是app1
            hello：{{ name }}  and {{age}}<!--获取变量 name Mustache语法 两个花括号 -->
        </div>
        <div id="app12">
            <div>{{message}}</div>
            <div v-text="message1"></div>
            <div v-html="message2"></div>
            
            <div v-once="message3"></div>
            <div v-pre>{{message4}}</div>
            <div v-cloak>{{message5}}</div>
        </div>
        <div id="app13">
            <div v-bind:title="property1"></div>
            <div :title="property2"></div>
            <div id="app131" :style="property3"></div>
            <div id="app132" :class="[property1,property2]"></div>
            <div id="app133" :class="[property4 ? property1:property2,property3]"></div>
            <div id="app134" :class="[A,A.display]" ></div>
            <div id="app135" :disabled="property4" ></div>
            <!--disabled属性如果返回值为false 则属性消失-->
            <div id="app136" :disabled="property5" ></div>
            
        </div>
        
    </div>
    
</template>

<script>
    var person={name:'tom',age:19,
                message:'文本渲染',
                message1:'this is <i>v-text</i>',
                message2:'this is  <i>v-html</i>',
                message3:'this is <i>v-once</i>',
                message4:"文本渲染",
                message5:"文本渲染5",
                property1:"aaa",
                property2:"bbb",
                property3:"border:1px red solid",
                property4:true,
                property5:false,
                A:{ display:'block'},
                }
    export default {
        data(){
            return person
        },
        
        
    }
</script>

<style>
    #app131{
        width: 800px;
        height: 100px;
    }
    
</style>

结果页

定义方法的三种形式

    export default {
        // 定义方法
        //data写法一  有名function写法
        // data(){
        //  return person
        // },
        //data写法二 匿名function写法
        // data:function(){
        //  return person
        // },
        // data写法三 lambda写法
        data:()=>{
            return person
        },
        method:{
        }
    }

vue 事件绑定

v-on:click 等价于 @click事件

        <div id="app14">
            <div id="app141">
                <button v-on:click="method1">{{msg}}</button> <br />
                <button @click="count+=1">{{count}}</button> <br />
                <button @click="method2('abc')">{{msg}}</button> <br />
            </div>
        </div>

<script>
    var person={name:'tom',age:19,
                message:'文本渲染',
                message1:'this is <i>v-text</i>',
                message2:'this is  <i>v-html</i>',
                message3:'this is <i>v-once</i>',
                message4:"文本渲染",
                message5:"文本渲染5",
                property1:"aaa",
                property2:"bbb",
                property3:"border:1px red solid",
                property4:true,
                property5:false,
                A:{ display:'block'},
                msg:"这里是消息msg",
                count:1,
                }
    export default {
        // 定义方法
        //data写法一  有名function写法
        // data(){
        //  return person
        // },
        //data写法二 匿名function写法
        // data:function(){
        //  return person
        // },
        // data写法三 lambda写法
        data:()=>{
            return person
        },
        methods:{
            method1:function(){
                this.msg=this.msg+" aaa"
            },
            method2:function(k){
                this.msg=this.msg+k
            }
            
        }
        
    }
</script>

分别点击三个按钮

事件修饰符

stop 阻止冒泡
prevent 阻止默认事件
once 只触发一次
我们发现 以上事件可以反复点击

反复点击现象

<button v-on:click.once="method1">{{msg}}</button> <br />

只能点击一次

点击 普通连接 出现新的对话框
点击 取消默认行 为不会出现新的窗口

<a href="http://cnblogs.com" target="_blank">普通链接</a><br />
<a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>

冒泡事件

这里的冒泡事件是 点击app1411 引起的 从内层向外层 发生冒泡

<div id="app14" @click="method5">
            <div id="app141" @click="method4">
                <button v-on:click.once="method1">{{msg}}</button> <br />
                <button @click="count+=1">{{count}}</button> <br />
                <button @click="method2('abc')">{{msg}}</button> <br />
                <a href="http://cnblogs.com" target="_blank">普通链接</a><br />
                <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>
                <div id="app1411" @click="method3">
                    这里是app14---》app141  --》app1411 method3
                </div>
            </div>
        </div>

    methods:{
            method1:function(){
                this.msg=this.msg+" aaa"
            },
            method2:function(k){
                this.msg=this.msg+k
            },
            method3:function(){
                console.log("method3 app1411")
            },
            method4:function(){
                console.log("method4 app141")
            },
            method5:function(){
                console.log("method5 app14")
            },
        }

冒泡事件

阻止冒泡方式 .stop

    <div id="app14" @click="method5">
            <div id="app141" @click="method4">
                <button v-on:click.once="method1">{{msg}}</button> <br />
                <button @click="count+=1">{{count}}</button> <br />
                <button @click="method2('abc')">{{msg}}</button> <br />
                <a href="http://cnblogs.com" target="_blank">普通链接</a><br />
                <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>
                <div id="app1411" @click.stop="method3">
                    这里是app14---》app141  --》app1411 method3
                </div>
            </div>
        </div>

阻止冒泡行为

鼠标修饰符

left 左键
right 右键
middle 滚轮

<div id="app142">
<button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}}</button>
</div>

    methods:{
            method1:function(){
                this.msg=this.msg+" aaa"
            },
            method2:function(k){
                this.msg=this.msg+k
            },
            method3:function(){
                console.log("method3 app1411")
            },
            method4:function(){
                console.log("method4 app141")
            },
            method5:function(){
                console.log("method5 app14")
            },
            left(){
                  this.message = 'left'
                },
            right(){
                  this.message = 'right'
                },
            middle(){
                  this.message = 'middle'
                },
        }

image.png

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

            <div id="app143">
                <button v-on:keyup.enter="enter">{{message}}</button>
                <button @keyup.tab="tab">{{message}}</button>
                <button @keyup="show($event)">{{message}}</button>
            </div>

methods:{
            method1:function(){
                this.msg=this.msg+" aaa"
            },
            method2:function(k){
                this.msg=this.msg+k
            },
            method3:function(){
                console.log("method3 app1411")
            },
            method4:function(){
                console.log("method4 app141")
            },
            method5:function(){
                console.log("method5 app14")
            },
            left(){
                  this.message = 'left'
                },
            right(){
                  this.message = 'right'
                },
            middle(){
                  this.message = 'middle'
                },
            enter(){
                    this.message = 'enter'
                },
            tab(){
                    this.message = 'tab'
                },
            show(e){
                    this.message = e.keyCode
                },
        }

表单事件

在进行表单提交时，页面会刷新，导致我们绑定的表单提交事件执行出问题，会避免刷新，我们需要使用阻止修饰符 prevent。

<div id="app144">
                <form v-on:submit.prevent="onSubmit">
                    <input type="text"><br />
                    <input type="submit" value="提交">
                </form>
</div>

onSubmit(){
                    alert('提交')
 },

观察msg aaa

提交后没有刷新页面 msg aaa

v-if v-show

v-if的简单用法如上面所示，当值为true时进行渲染，当值为false时，页面中不会进行渲染。
我们可以使用 v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”，可以链式地使用多次。
v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

image.png

当为false时 if不显示，show为display等于none

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
v-if有很高的切换开销，适用于条件不太容易改变的时候
v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
v-show有很高的初始渲染开销，适用于非常频繁地切换

v-for 循环遍历键值对型（对象型）与数组型集合

<div id="app145">
                一个值时为value
                <li v-for="value in object1">
                {{ value }}
                </li>
                <hr />
                两个值时为value，key
                <div  v-for="(value, key) in object1">
                 {{ key }} : {{ value }}
                </div>
                <hr />
                三个值是为value, key,index
                <div  v-for="(value, key,index) in object1">
                {{ index }} : {{ key }} : {{ value }}
                </div>
             
            </div>

var person={name:'tom',age:19,
                message:'文本渲染',
                message1:'this is <i>v-text</i>',
                message2:'this is  <i>v-html</i>',
                message3:'this is <i>v-once</i>',
                message4:"文本渲染",
                message5:"文本渲染5",
                property1:"aaa",
                property2:"bbb",
                property3:"border:1px red solid",
                property4:true,
                property5:false,
                A:{ display:'block'},
                msg:"这里是消息msg",
                count:1,
                isshow:false,
                isok:false,
                object1: {
                      firstName: 'John',
                      lastName: 'Doe',
                      age: 30
                }
                }

遍历键值对型（对象型）集合结果

遍历数组型集合

                <hr />
                一个值item
                <ul>
                <li v-for="item in fruits" >{{item}}</li>
                </ul>
                一个值两个值是item, index
                <ul>
                <li v-for="(item, index) in fruits" v-on:click="method6(index)">{{index}}：{{item}}</li>
                </ul>

    method6:function(k){
                console.log("method6 "+k)
            },

运行结果

methods、watch、computed

methods、watch、computed用法对比

<template>
     <!--定义一个容器 id="app"-->
    <div id="app1">
        <div id="app14">
            <div id="app147">
                <div id="app1471">
                    <div>{{ arr.join('') }}</div>
                    <div>{{ arr1 }}</div>
                    <div>{{ getDate }}</div>
                    <div>{{ getDate1 }}</div>
                </div>
                <div id="app1472">
                    <div v-for="(item, idx) in arr">
                        {{ matching(item) }}
                    </div>
                </div> 
                <div id="app1473">
                    <div>{{ obj1.a  }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    var person={
                object1: {
                                    firstName: 'John',
                                    lastName: 'Doe',
                                    age: 30
                                },
                fruits: ['apple', 'tomato', 'banana', 'watermelon'],
                package: {
                    count: 5,
                    price: 5
                },
                date: '',
                arr: ['a', 'b', 'c'],
                obj: {a: 'hello', b: 'world'},
                obj1: {a: 'hello'},
                test: 'aaa' ,
                }
    export default {
        // 定义方法
        //data写法一  有名function写法
        // data(){
        //  return person
        // },
        //data写法二 匿名function写法
        // data:function(){
        //  return person
        // },
        // data写法三 lambda写法
        data:()=>{
            return person
        },watch: {
            test () {
              setTimeout(() => {
                this.obj1.a = this.test + 'word'
              }, 5000)
            }
          }, 
        computed:{
                  getDate () {
                      return Date.now()
                    },
                  getDate1 () {
                      return this.date
                    },
                  arr1 () {
                      return this.arr.join('')
                    },
                   getObj () {
                      setTimeout(() => {
                        this.obj.a = this.test + 'word'
                        return this.obj
                      }, 1000)
                   },
        },
        methods:{
            matching (key) {
                    if (this.obj[key]) {
                        return this.obj[key]
                    } else {
                        return 'not found'
                    }
            },
        },created () {
            setInterval(() => {
              this.date = Date.now()
            }, 1000)
          }, mounted () {
            this.test = 'hello'
          }         
    }
</script>
<style>
    #app131{
        width: 800px;
        height: 100px;
    }
    
</style>

刚刷新后结果显示

6秒后刷新显示

computed

计算属性计算时所依赖的属性一定是响应式依赖，否则计算属性不会执行
计算属性是基于依赖进行缓存的，就是说在依赖没有更新的情况，调用计算属性并不会重新计算，可以减少开销

应用场景：
1.复杂的渲染数据计算，用computed计算属性可以减少一定计算开销，增加可维护性
2.从Vuex Store中收集相关信息，对Vuex中的数据做计算的时候的要特别注意computed的缓存属性，在对Vuex中的对象值进行属性修改的时候，并不会触发computed的中值的变化，这时需要Object.assign({},obj)对依赖对象进行跟新返回一个新对象触发依赖跟新
3.表单校验，这个应用场景应该是比较常见的，利用正则表达式对每个表单项的实时监控，判断表单是否可以提交
不能在computed中书写下列方法，不能书写异步方法setTimeout(){ }

getObj () {
                      setTimeout(() => {
                        this.obj.a = this.test + 'word'
                        return this.obj
                      }, 1000)
                   },

若在computed中书写异步方法会报错

解决办法 ：使用watch
在模版中调用getObj.a时，如果没有setTimeout这异步操作，直接返回一个值是可以直接在模版中显示的，但是由于加异步操作就会导致没有返回值同时调用对象的属性，就会报错，而调用obj1.a却不一样，模版会先显示hello，然后在触发了watch属性时，setTimeout触发，5秒钟之后模版会显示helloword，这就watch中可以使用异步函数，而computed不行的原因

                  <div id="app1474">
                    
                        <button @click='a++'>a加1</button>
                        <input type="text" v-model="a" >
                        <p>{{message7}}</p>
                    
                </div>

var person={
                message7:"",
                a:1,
                }
export default {
              data:()=>{
            return person
        },watch: {
            test () {
              setTimeout(() => {
                this.obj1.a = this.test + 'word'
              }, 5000)
            }
          }, 
 }

watch

watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。
而侦听器 watch 是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。
适用场景：

watch擅长情景

method

methods的方法是通过触发一个事件或者函数的回调来实现数据的更新，他的执行，依赖于事件的触发。
但对于每次都需要进行重新计算的属性比如下面这个函数的返回值 function () { return Date.now() } ，我们最好使用 methods。

computed:{
                  getDate () {
                      return Date.now()
                    },
                  getDate1 () {
                      return this.date
                    },
                  arr1 () {
                      return this.arr.join('')
                    },
                   getObj () {
                      setTimeout(() => {
                        this.obj.a = this.test + 'word'
                        return this.obj
                      }, 1000)
                   },
        },

改为

methods：{
                   getDate () {
                      return Date.now()
                    },
}

深度监听

监听的简单的数据类型，数据改变很容易观察，但是当需要监听的数据变为对象类型的时候，上面的监听方法就失效了，因为上面的简单数据类型属于浅度监听，对应的对象类型就需要用到深度监听，只需要在上面的基础上加上deep: true就可以了。

<div id="app1474">
                        <div v-for="item in list">
                        　　<input type="text" v-model="item.val" />
                      　</div>
                      
                    
                </div>

var person={
                list:[
                  {val: ''},
                  {val:''}
                ],
                }
export default {
    watch: {
            test () {
              setTimeout(() => {
                this.obj1.a = this.test + 'word'
              }, 5000)
            },
            a:function(val,oldval){
                　　 this.message = 'a的旧值为' + oldval + ',新值为' + val;
              　　},
            list:{
                  handler: function (val, oldVal){   //在显示变值之前就出现值得提示
                    alert('数据改变了');
                  },
                   deep: true //如果加上deep：true可以监听到文本框值得变化
                }
          }, 
}

修改文本框里的值

监听到数据变化

改变的值显示在文本框中

双向绑定v-model

v-bind实现了数据的单向绑定，将vue实例中的数据同元素属性值进行绑定，接下来看一下vue中的数据双向绑定v-model。

                <div id="app1475">
                    <input v-model="message"  />
                    <div>{{message}} </div> 
                </div>              

var person={message:'文本渲染',}
export default {
        // 定义方法
        //data写法一  有名function写法
        // data(){
        //  return person
        // },
        //data写法二 匿名function写法
        // data:function(){
        //  return person
        // },
        // data写法三 lambda写法
        data:()=>{
            return person
        },
}

双向绑定结果

当我们改变input框的value时，p标签的内容立即随之改变，也就是说，在默认情况下， v-model在input事件中同步输入框的值与数据.
但可以添加一个修饰符 lazy ，从而转变为在input框失去焦点的时候同步(鼠标移出输入框时，才同步数据)。

                v-model<input v-model="message8"  /> <br>
                    v-model.lazy<input v-model.lazy="message8"/> <br>
                    <div>{{message8}} </div>    

 type="number"输入框<input v-model="num1" type="number" /><span>{{type1}}</span>

var person={num1:8}

加载好显示类型为number

改变数值后变为string类型

初始化的时候，获取的是绑定的值，为number类型，但是当input框的value值发生变化时，类型就变为了字符串类型，此时，我们可以添加一个修饰符number给v-model来处理输入值，这样我们就可以获得number类型的数值了。

 type="number"输入框<input v-model.number="num1" type="number" /><span>{{type1}}</span>

被number修饰后，变量一直为number类型

v-model.trim

在input框中，对用户的输入进行限制是十分重要的，其中最常见的就是去空格了，在vue中，如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入，需要注意的是，该方法只能去除首尾的空格，不能去除中间的空格。

去除空格

单选框和计算属性使用

<input type="text" v-model.number="a" >
                        这个数字加一的结果是{{b}}<br>
                        <input type="radio" name="sex" v-model="sex" value="男">男
                        <input type="radio" name="sex" v-model="sex" value="女">女
                        你的性别是{{sex}}

var person={
                a:1,
                mess3:"",
                }
export default {
  data:()=>{
            return person
        },
  computed:{
    b:function(){
            return this.a +1;
                      },
  }
}

image.png

 <input v-model.trim="mess3">
 <p>mess3 is :{{ mess3 }}</p>

全局过滤器

下面定义一个全局过滤器，用于在数据前加上大写的VUE。需要注意的是，过滤器定义必须始终位于Vue实例之上
找到main.js

在main.js中new vue实例上方添加 Vue.filter

Vue.filter("toAdd2",function(value){
        return 'Add2VUE全局过滤器'+value
})
Vue.filter("toAdd",function(value){
            return 'VUE全局过滤器' + value
        })

再到test1.vue中添加 使用过滤器部分代码

image.png

<div id="demo">{{message | toAdd | toAdd2 }}</div>

image.png

本地过滤器

本地过滤器存储在vue组件中，作为filters属性中的函数，我们可以注册多个过滤器存储在其中。

在vue中写本利过滤器

filters: {
              Reverse: function (value) {
                  if (!value) return ''
                  value = value.toString()
                  return value.split('').reverse().join('')
              },
              Length: function(value){
                  return value.length
              } ,
          },

                    <div id="demo">{{message | Reverse }}</div>
                    <div id="demo">{{message | Length }}</div>

运行结果

过滤器传参

 {{msg1 | toDou('12','5')}}
 {{msg2 | toDou('12','5')}}

  toDou:function(n,a,b){
                if(n<10){
                    return n+a;
                }else{
                    return n+b;
                }
            },

运算结果

vue自定义指令

定义全局自定义指令

Vue.directive('red',function(el, binding, vnode){
                el.style.background='red';
                console.log(el);
                console.log(binding);
                console.log(vnode);
        });     

使用自定义指令

<div id="app1477"> 
                    <p v-red>aaaaa</p>
                    <p v-red>12345</p>
                    <p v-red>自定义</p>
                </div>

在vue自定义指令中

el，binding，vnode对应数据结构

自定义指令传参 -----binding

使用binding.value获得前台的参数值

Vue.directive('color',function(el, binding, vnode){
                console.log(binding.value);
                el.style.background=binding.value;
        }); 

<scriptt>
                <div id="app1478">
                    <p v-color='r'>aaaaa</p>
                    <p v-color='g'>12345</p>
                    <p v-color='p'>自定义</p>
                </div>
var person={
                r:'red',
                               g:'gray',
                               p:'pink',
                }
data:()=>{
            return person
        }
</script>

传参指令结果

自定义指令获取事件属性
test1.vue

<div id="app1477">
                    
                        <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
                        <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
                
                </div>

main.js

Vue.directive('drag',function(el){
            el.onmousedown=function(ev){
                var disX=ev.clientX-el.offsetLeft;
                var disY=ev.clientY-el.offsetTop;
                

                document.onmousemove=function(ev){
                    var l=ev.clientX-disX;
                    var t=ev.clientY-disY;
                    el.style.left=l+'px';
                    el.style.top=t+'px';
                
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
            };
        });

拖拽前后

vue脚手架 全局组件

自定义test2.vue

image.png

<template>
    <div>
        {{name}}
    </div>
</template>
<script>
    export default{
        // name:"this is test2",
        data(){
          return {
            name:"这里是test2 组件"
          }
        },
    }
</script>
<style>
</style>

main.js 中先引入包 再使用Vue.component('aaa',test2)

main.js

import test2 from './components/test2.vue'

Vue.component('aaa',test2)

App.vue

App.vue

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

最终结果加载对应全局组件

局部组件

在App.vue组件中
1.导包
2.在export default中加入 components 里面写入要引入的组件
3.在template中使用对应组件

App.vue

<template>
  <div id="app">
   <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <test1> 
    </test1> 
    
    <!-- <aaa></aaa> -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import test1 from './components/test1.vue'


export default {
  name: 'app',
  components: {
    HelloWorld,
        test1,
  }
}
</script>

正常显示test1中的内容

以下为快速回顾vue指令

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>指令合集</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

  <style>
    .greenWord {
      color: green;
    }

    .wordSize {
      font-size: large;
      background-color: darkorange;
    }

    .redWord {
      color: red;
    }

    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>

<div id="app1">
  <!--绑定普通文本-->
  <h3>1、插值绑定</h3>
  <span v-text="msg"></span>
  <span>{{msg}}</span>

  <!--插入一段html源码 将源码渲染为DOM结构-->
  <h3>2、v-html 动态渲染html</h3>
  <div v-html="mhtml"></div>

  <!--v-show 原理：通过改变css的display决定是否显示元素；即不管v-show的值是true还是false,都会渲染完该节点下所有Dom-->
  <h3>3、v-show 条件渲染</h3>
  <span v-show="isshow">提莫队长现身啦</span>

  <!--真正的条件渲染，符合条件则渲染v-if的DOM结构，否则只渲染v-else指示的结构块-->
  <h3>4、v-if 使用</h3>
  <span v-if="isok">您是男士</span>
  <span v-else>您是女士</span>
  <span v-if="Math.random() < 0.3">概率小于0.3</span>
  <span v-else-if="Math.random() < 0.6 && Math.random()>=0.3">概率0.3~0.5</span>
  <span v-else>概率大于50%</span>

  <!--for循环插值-->
  <h3>5、v-for vue循环</h3>
  <div v-for="item in items">{{item}}</div>
  <div v-for="item in items2">{{item.name}}>>>{{item.age}}</div>

  <!--给节点添加事件处理功能-->
  <h3>6、v-on 事件处理器</h3>
  <button v-on:click="chgColor" id="btn1">雨中的彩虹</button>
  <button v-on:click.right="rightAlert">右击选择</button>
  <button v-on:click.stop="stopEvent($event)">停止冒泡</button>
  <button v-on:click="count +=1">加法：{{count}}</button>

  <!--给元素绑定class属性-->
  <h3>7、v-bind 绑定class</h3>
  <span v-bind:class="{greenWord : isActive}">快给我披上色彩吧</span>
  <span v-bind:class="classObj">却从没有感觉，我无地自容</span>
  <span v-bind:class="[redWord]">绑定数组类</span>

  <!--给元素绑定内联style-->
  <h3>8、绑定内联样式</h3>
  <span v-bind:style="{color:'#66cc66',fontSize:20+'px'}">内联样式 对象语法</span>
  <span v-bind:style="styleObj">内联样式>>>对象语法</span>
  <span v-bind:style="[styleObj]">内联样式>>>数组语法</span>

  <!--绑定一个html属性,自定义的也可以-->
  <h3>9、绑定一个属性</h3>
  <img v-bind:src=" './logo.png' "/>
  <div v-bind:title="mtitle">红红火火恍恍惚惚</div>
  <div v-bind:data-mid="mid">测试绑定mid</div>

  <!--处理表单 憋说话 怒吃你的语法糖-->
  <h3>10、v-model 表单控件或者组件上创建双向绑定</h3>
  <input v-model="message" placeholder="edit me">
  <p>单行信息：{{message}}</p>
  <textarea v-model="info" placeholder="add multiple lines"></textarea>
  <p style="color: darkorange">多行信息：{{info}}</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">单个复选框：{{checked}}</label>
  <h4>多个复选框</h4>
  <div>
    <input type="checkbox" id="jack" value="jack" v-model="checkNames">
    <label for="jack">jack</label>
    <input type="checkbox" id="jack2" value="jack2" v-model="checkNames">
    <label for="jack2">jack2</label>
    <input type="checkbox" id="jack3" value="jack3" v-model="checkNames">
    <label for="jack3">jack3</label>
    <span>checked names:{{checkNames}}</span>
  </div>
  <h4>单选框</h4>
  <input type="radio" id="one" value="one" v-model="picked">
  <label for="one">one</label>
  <span>您的选择：{{picked}}</span>
  <h4>选择框</h4>
  <select v-model="selected">
    <option>111</option>
    <option>222</option>
    <option>333</option>
  </select>
  <span>您的选择：{{selected}}</span>
  <!--语法糖 有点甜 方便一丢丢-->
  <select v-model="mselect">
    <option v-for="option in options" v-bind:value="option.value">
      {{option.text}}
    </option>
  </select>
  <span>您的选择：{{mselect}}</span>

  <!--很少用到这个-->
  <h3>11、v-pre 跳过该元素和其子元素编译过程</h3>
  <span v-pre>{{@@@@@@@@@@@@@@@@@@@@@@}}</span>

  <!--现象：在vue编译结束中，界面可能会闪现一下Mustach符号，很丑。加上这个指令可以有效地阻止这种情况发生，永葆优雅。-->
  <h3>12、v-lock 该实例编译结束后，解除该指令绑定</h3>
  <div v-cloak>{{message}}</div>

  <!--少用-->
  <h3>13、v-once 只渲染元素和组件一次</h3>
  <span v-once>我只更新一次：{{once}}</span>
  <span>不加v-once:{{once}}</span>

</div>

</body>

<script>
  var app1 = new Vue({
    el: '#app1',
    data: {
      msg: '插值测试',
      mhtml: '<span style="color: palevioletred">巴啦啦小魔仙</span>',
      isshow: true,
      isok: true,
      items: ["林徽因", "陆小曼", "张爱玲"],
      items2: [{name: "徐志摩", age: "28"}, {name: '梁思成', age: 26}, {name: '金岳霖', age: 30}],
      count: 0,
      isActive: false,
      error: null,
      classObj: {
        greenWord: true,
        wordSize: true
      },
      redWord: 'redWord',
      styleObj: {
        color: '#00eeff',
        fontSize: 30
      },
      message:'',
      info:'',
      checked:true,
      checkNames:[],
      picked:'',
      selected:'',
      options:[{text:'犬次郎',value:'QCL'},{text:'道格森二世',value:'DGS'}],
      mselect:'',
      once:'渲染2次',
      mtitle:'title-property',
      mid:'123456'
    },
    methods: {
      chgColor: function () {
        $("#btn1").css('color', "#cc66cc")
        $('#btn1').text('我变成了粉红色')
      },
      rightAlert: function () {
        alert("您点击了鼠标右键")
      },
      stopEvent: function (event) {
        alert("event:" + event.target.tagName)

      }
    },
    computed: {
      classObj: function () {
        return {
          greenWord: this.isActive && !this.error,
          wordSize: this.error && this.error.type === 'fatal'
        }
      }
    }
  })
</script>
</html>