vue基本语法

vue的安装流程
1、先安装node
2、打开cmd，检测node是否安装成功，输入node -v，因为node自带npm，检测npm，npm -v,但是开发不使用npm，使用cnpm
3、安装cnpm，需要一个淘宝镜像，输入npm install -g cnpm --registry=https://registry.npm.taobao.org,检测是否安装成功，输入cnpm -v
4、搭建vue开发环境，安装Vue的脚手架工具，脚手架提供了Vue的所有东西，输入cnpm install -g vue-cli
5、新建一个文件vue并打开，要想安装vue，必须给其安装插件vetur和vue 2 snippets
6、创建一个项目，因为vscode直接回在文件的路径中打开，要想将新建好的文件的路径在cmd中打开，要想跳出当前盘，直接输入
E：、然后逐步进去cd vue，则进入文件路径，
7、创建一个项目，用旧的版本，输入vue init webpack demo01，在这过程中，只有install vue-router选择yes，其他都是no，直到项目安装成功，
检测其是否安装好，重新打开demo01文件，输入cnpm run dev，直到显示成功，此时运行结果会显示端口比如8080，在浏览器窗口输入localhost:8080，若显示为vue.js，则项目创建成功。
用另一种换单的方式安装，打开文件vue，直接在终端中输入vue init webpack-simple demo02，回车，在use sass中选择yes，则安装完成，打开demo02，
因为此时创建的为空模板，还不能运行，还需要安装依赖，在终端输入cnpm install，安装完成后，输入cnpm run dev检测是否成功，若调到vue网页中，则另一个项目创建成功。
模板template标签里面只能有一个子元素
一、数据绑定，绑定属性，循环渲染数据，数据渲染
1、数据绑定：表达式{{}}以及绑定属性
动态变量绑定

<div>{{a}}</div>     //1
<div>{{str}}</div>     //字符串
<div>{{arr[0]}}</div>  //1
<div>{{obj}}</div>   //{name:"张三",sex:"男"}
<div>{{obj.name+"/"+obj.sex}}</div>  //张三、男

使用模板字符串取值

<div>{`我的名字：${obj.name},我的性别：${obj.sex}`}}</div>  //我的名字：张三，我的性别：男
data(){
    return {
        a:1,
        str:"字符串"，
        arr:[1,2,3,4,5,6],
        obj:{
            name:"张三",
            sex:"男"
		}
	}
}

3、循环渲染数据：v-for
单层渲染

<div>{{student}}</div> 
<ul>
    <li v-for="(item,index) in student":key="index">
        {{item.name+"/"+index}}
    </li>
</ul>
data(){
    return {
        sttudent:[
        {
           name:"张三",
            sex:"男"
         },
         {
           name:"李四",
            sex:"男"
         },
         {
           name:"王五",
            sex:"男"
         }
       ]
}
}

二、vue绑定属性，绑定class，绑定style
1、绑定属性：v-bind，可以简写为：属性

<div v-bind:"title"title"></div>

等价于

<div :"title"title"></div>

title:标题
2、动态给元素添加类名称

<div class="block"></div>
<style>
    .block{
        width:200px;
        height:200px;
        border:1px solid red;
}
</style>

或者

<div:class="addClass"></div>   //绑定单个
addClass:"block",
<style>
    .block{
        width:200px;
        height:200px;
        border:1px solid red;
}
</style>

直接绑定元素的class名称

<div:class="{'block':true,'bor':true}"></div>  // 通过变量绑定多个
addClass:"block",
<style>
    .block{
        width:200px;
        height:200px;
        border:1px solid red;
}
     .bor{
        width:200px;
        height:200px;
        border:1px solid red;
}
</style>

或者

<div:class="['block','bor']"></div>  //直接绑定多个

3、绑定元素css

<div:style="{'width':'100px','height':'100px'}"></div>  //直接绑定
<div :style="{'width':`${w}px`,'height':'100px'}"></div> //绑定元素模板

三、vue数据双向 vue事件 vue中ref获取dom元素节点 mvvm
1、数据双向：v-model，用于表单元素的使用指令，是数据双向指令，也就是后台数据变化，前台自动变化，前台数据变化后台自动修改

<input type="text" v-model="test">
test:"请输入...",

2、vue里面的事件绑定：@click="“或者v-on:click=”"

<input type="text" v-model="test">
<button v-on:click="setMsg()">设置值</button>
<button @click="setMsg()">读取值</button>
methods：{
     setMsg(){
         this.test="我修改了";  //this指代当前的组件
}，
     getMsg(){
         console.log(this.test);
 }
}

当点击设置值时，文本框中变为我修改了，同是也会输出我修改了
3、vue中ref获取dom元素节点

<div ref="donlist">1</div>
<div ref="donlist">2</div>
<button @click="getlist()">获取dom元素</button>
getlisr(){
    console.log(this.$refs.domlist.innerHTML);  //<div>2</div>
}

在methods方法中设置获取dom元素，如果有多个元素，获取到的元素只有一个，获取的元素为后者，因为前者元素被覆盖
用原生js也可以获取dom元素

<div id="block" ref="donlist">2</div>
console.log(document.getElementById("block"));

4、MVVM 结构 MV 指model数据改变影响view VM指view数据改变影响model
四、vue事件 事件对象 定义方法 执行方法 数据的相关操作
1、vue事件
v-on:click="“等价于@click=”"

<button v-on:click="getMsg(1)">事件</button>
methods：{
     getMsg(e){
         console.log(e)    //1
	}
}

此时的e不是事件的执行参数，而是事件的传参，若没有1，则输出结果为undefined

<button v-on:click="getMsg">事件</button>
methods：{
     getMsg(e){
         console.log(e)    //1
	}
}

此时的e是事件的执行参数
五、vue中父子组件的传值：
父组件给子组件传值：在子组件里面声明接受传值的参数，属性为props，写法有两种
在子容器中

<div>父容器给我传递的属性为----{{title}}</div>
//props:['title'],
props:{
    'title':String   //主要作用是为了限制数据的类型，虽然数据可以传过去，但是会出现报错
},

在父容器中

<v-header :title="title"></v-header>
title:"商家"

父组件获取子组件的数据和方法：
在子组件上定义ref属性，通过this.$fers.name属性，或者this.$refs.name方法
子组件主动获取父组件的属性和方法：
this.$parent数据和this.$parent方法
六、vue的核心：路由：通过路径跳转页面（vue-rouyer）,类似于a链接
hash原理：通过location跳转界面、通过history跳转界面。
要想进行页面跳转、使用路由：
1、安装vue-router，安装方式为：cnpm install vue-router --save-dev(dev可写可不写，区别在于vue-router的位置不同)
2、引入路由：import vueRouter from ‘vue-router’
3、配置路由，去main.js文件进行引入和配置

let router=new vueRouter({
    routes:[
        path:"",component:""
	]
})

4、使用路由：

Vue.use(vueRouter);  
new vue({
    el:#app,
    render:h=>h(APP)
})
5、挂载路由：
new vue({
    el:#app,
    router
    render:h=>h(APP)
})

整个过程都在main.js中进行，但在做项目的时候，一般不用这种方法，而是要对路由要进行外部的模块化封装，但二者的性质是一样的，都是对路由进行引入和配置并使用。
路由的模块化封装：
首先在src文件中建一个router文件，在router文件夹中建一个router.js文件,在此文件中进行路由的引入和配置:

import Vue from 'vue';
import vueRouter from 'vue-router';

修改路由的模式：路由模式默认为hash模式，标志为#，要想修改为/，即修改路由的模式，在main.js文件中输入mode:“history”,
路由的写法：router-link实际上就是a链接，在网页解析后显示的为a链接

<router-link to="/">首页</router-link>
<router-link to="/zhao">招聘</router-link>
<router-link to="/lian">联系我们</router-link>

若想点击对应的链接跳转到对应的组件，首先在src文件中建立一个components文件夹，依次建立对应的组件文件vue，例如index.vue文件，在其中写入相应的数据，然后在App.vue文件中进行挂载，

import firstpage from './components/index'
components:{
    firstpage
}

七、搭建app
安装完依赖之后，在安装路由，输入cnpm install vue-router --save
安装完路由之后，需要安装mock数据，输入cnpm install mockjs --save
安装完mock数据之后，还阻延安装axios请求，输入cnpm install axios --save