Vue快速入门教程

        前言，本文章适合有一定基础的同学，可以快速的对vue有一定的了解并可上手开发，主要是自己最近一直再写微信小程序相关项目，Vue有点遗忘，回顾整理一下vue相关知识，希望可以帮助到大家。vue相对如jquery来说重点主要放在操纵数据而不是dom元素。

一、vue项目的搭建

        在vue项目的学习中，需要先搭建一个vue项目，推荐通过安装vue-cli去搭建，具体的搭建步骤可以看这篇文章vue项目搭建，其中包括了简单是页面适配呀，浏览器默认样式清除这篇文章都有讲。

二、vue项目的基本语法

        1.{{  }}        模板语法（插值语法表达器）

//html中使用
{{aaa}}
//script中数据声明，data为函数返回对象的格式，使每一位调用者都有对数据的一份独立的拷贝，返回对象的内存地址不同
export default {
 data(){
   return{
     aaa:"111"
   }
 }
}

        2.v-text指令替换文本内容基本用不到，可用{{  }}代替

        3.v-html指令相比于v-text指令来说可以解析HTML标签

        4.v-on:（@）事件标识符，常用：@click="aaaa"

{{aaa}}

methods:{
   aaaa() {
     var ddd=()=>{
       console.log(this.aaa++);
     }
     ddd()
   }
 }

        5.v-show指令控制元素的display属性控制元素的显示与隐藏，真为显示，假为隐藏。

{{aaa}}

data(){
   return{
     aaa:111
   }
 },

        6.v-if指令用法和v-show指令类似，不同的是v-if通过控制元素的删除与插入控制元素的显示与隐藏

        7.v-bind(:)指令设置元素的属性，例如图片的src属性、class名等,可以配合三木运算符去切换对应的class名

{{aaa}}
或
:class="{active:bbb}" 
    

data(){
   return{
     aaa:111,
     bbb:false
   }
 },

        8.v-for指令遍历数组对象

//遍历数组  :key="item"记得要加不加可能报语法错误  v-for="(index,item) in arr"  也可以取下标

    
{{item }}


arr:[1,2,3,4,5,6,7]

//遍历对象
{{item.name }}

arr:[{name:1},{name:2},{name:3}]

        9.v-model指令双向数据绑定