vue的学习

1.新建文件创建项目
（1）打开终端
（2）vue init webpack-simple demo01
(3) 要在此文件内安装依赖 cnpm install
(4)cnpm run dev运行
vue.app 是主模板 中只能有一个大

2.vue语法
（1）数据绑定
在return中写例如
a：1，
str: “感觉很美”，
arr:[1,2,3,4,5],
obj:{
name:“张三”，
sex:“男”
}
在<template>中写
<div>{{a}}</div>
<div>{{str}}</div>
<div>{{arr[0]}</div>
<div>{{obj}}</div>
//使用模板字符串绑值
例如在<template>中有
<div>{{ 我的名字叫:${object.name},我的性别是你看不出来！}}</div>
(2)循环渲染数据
在return中写一个集合
student:[
{
name:“maodou”,
sex:“男”

}，
{
name:“王五”,
sex:“男”

}，
{
name:“李四”,
sex:“男”

}，
{
name:“张三”,
sex:“男”

}

]
当直接渲染时 在<template>中{{student}}
循环渲染时 先在<template>中构建<ul><li>；然后再写一个<div>数据循环渲染 v-for 循环那那个元素给那个写//所以此时给<li>写</div>//指令//<li v-for="(item,index) in student":key=“index”>{{item}}</li>
(3)嵌套渲染（多层渲染）
student:[
{
name:“maodou”,
sex:“男”，
hobby：[
{h:“篮球”}，
{h:“pingpan”},
{h:“羽毛球”}

]

}，
{
name:“王五”,
sex:“男”，
hobby：[
{h:“篮球”}，
{h:“pingpan”},
{h:“羽毛球”}

}，
{
name:“李四”,
sex:“男”，
hobby：[
{h:“篮球”}，
{h:“pingpan”},
{h:“羽毛球”}

}，
{
name:“张三”,
sex:“男”，
hobby：[
{h:“篮球”}，
{h:“pingpan”},
{h:“羽毛球”}

}

]
此时进行渲染出来是多层的
多层渲染在<template>中写一个<ul><li>
中再写一个<ul><li>
<ul>
<li v-for="(item,index) in student":key=“index”>
{{item.name+“爱好是：”}}
<ul>
<li v-for="(hot,k) in item.hobby":key=“k”>
{{hot.h}}
</li>
</ul>
</li>
</ul>

(4)vue绑定属性的问题
//v-bind 可以简写为 ：属性
<div v-bind:titlle=“title”></div>
<div :titlle=“title”></div>
以上两种写法实现的功能一致
<div v-html=“ht
mlinfo”></div>
<div v-text=“title”></div>
(5)给元素添加类名称
在<style>中有
.block{
width:200px;
height:200px;
border:1px solid red;

}要将这个类添加给元素
在<template>中
<div class=“block”></div>//常规写法
可以直接绑定元素的名称
<div :class=“addClass”>
在<script>中写 addClass:“block”
一次性绑定多个类名称
在<script>中有多个类
在<template> 中写<div :class="{‘block’:true,‘bor’:true}"></div>///block与bor是类名称
直接绑定多个 <div :class="[‘block’,‘bor’]"></div>
(6)绑定元素的样式
直接操作元素的css
<div :style="{‘width’:‘100px’,‘height’:‘100px’}"></div>
里面的值可以动态换
在<script>中定义一个变量w:100
<div:style="{width:$(w)px,height:100px}"></div>
(7)vue中的数据双向
//v-model 给表单元素的使用指令 是数据双向 后台数据变化 前台自动变化 前台变化后台自动修改
在<script>中写 test：“请输入…”
在<template>中 <input type=“text” v-model=“test”>//MVVM模块层到数据层 数据层到模块层
（8）vue中的事件绑定 @click="" 或者v-bind:click=""
<button v-on:click=" “>设置值</botton>
<button v-on:click=” ">读取值</botton>
methods:{
//事件的执行方法
在data中
setMsg(){

 this.test="我修改了"

},
getMsg(){
console.log(this.test);
},
changeMsg(){
console.log(this.test);
},
keyData(){
console.log(this.test)
}

<button v-on:click=“setMsg”>设置值</botton>
<button v-on:click=“getMsg”>读取值</botton>

<input type=“text” @change=“changeMsg()” @keypress=“ketData()” v-model=“test”>
<9>获取Dom元素 使用ref
<div ref=“domlist”></div>
<button @click=“getDom”>获取dom元素</button>
getDom(){
console.log(this.$refs.domlist);
}