一、vue数据绑定、绑定属性、循环渲染数据
1.数据绑定
（1）变量的绑定：表达式{{ }}
（2）对象的绑定
（3）其他的绑定指令
v-html指令：绑定当前元素的html标签，可自动解析值里面的html标签
v-text指令：将值放进去，不会解析里面的html标签，也可进行变量的绑值
<template>
<!-- 里面只能有一个根标签 -->
<div id="app">
<!--
一、1.数据绑定
-->
<!-- （1）变量的绑定：表达式{{}}-->
<p>{{msg}}</p>
<hr>
<!-- （2）对象的绑定 -->
<p>{{stu.name+"/"+stu.sex}}</p>
<hr>
<!-- （3）其他的绑定指令 -->
<!-- v-html指令：绑定当前元素的html标签，可自动解析值里面的html标签 -->
<p v-html="ht"></p>
<hr>
<!-- v-text指令：将值放进去，不会解析里面的html标签，也可进行变量的绑值-->
<p v-text="ht"></p>
<p v-text="msg"></p>
<hr>
</div>
</template>
<script>
//导出当前组件模块 作用于当前组件
export default{
name:"app",
data(){
return{
//数据属性的位置
msg:"我是APP组件里的msg",
stu:{
name:"毛豆",
sex:"男",
age:"12"
},
ht:"<b>vue 你好</b>"
}
}
}
</script>
<style>
/* 当前组件的css脚本 */
/* scope 渲染当前的组件 局部的css */
</style>
2.绑定属性
利用变量值，动态操作元素属性
经典：操作图片的src
<template>
<div id="app">
<!--
一、2.绑定属性
动态操作元素属性
v-bind 简写形式 ：
-->
<div v-bind:title="title"></div>
<!-- 远程图片 -->
<img v-bind:src="imgsrc">
<!-- 本地图片 -->
<img :src="localsrc">
<!--
class类名称绑定：通过true变量控制类是否存在
动态绑定多个class {class:变量,class:变量}
-->
<div :class="{a_block:ishow}"></div>
<div :class="ishow?'a_block':''"></div>
<div :class="[isclass,isclass,isclass]"></div>
<div :class="[ishow?isclass:'']"></div>
<hr>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
title:"我是vue-title",
imgsrc:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2362865390,2873183255&fm=85&app=52&f=JPEG?w=121&h=75&s=ED36A1571EB013BBDFA950450100A0E0",
// require：请求，请求这个图片，拿到后再给到这儿
localsrc:require("./assets/img/11.jpg"),
ishow:true,
isclass:"isbg"
}
}
}
</script>
<style>
.a_block{
width: 100px;
height: 100px;
background-color: red;
}
.isbg{
border: 1px solid blue;
}
</style>
3.循环渲染数据
v-for:可理解为重复，写给谁就是重复谁
使用v-for时添加key属性，保持唯一性
<template>
<div id="app">
<!--
一、3.循环渲染数据
v-for:可理解为重复，写给谁就是重复谁
使用v-for时添加key属性，保持唯一性
-->
<ul>
<!-- item 指里面的每一项；index 指当前循环里的索引 -->
<li v-for="(item,index) in student" :key="index">
{{item.name+"/"+item.age}}
</li>
</ul>
<hr>
<!-- 循环多层数据 -->
<ul>
<li v-for="(item,index) in people" :key="index">
<p>{{item.name}}</p>
<p>{{item.age}}</p>
<ul>
<li v-for="(it,key) in item.score" :key="key">
<p>{{it.name+"/"+it.s}}</p>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
student:[
{name:"maodou",age:"20"},
{name:"maodou",age:"20"},
{name:"maodou",age:"20"},
{name:"maodou",age:"20"},
{name:"maodou",age:"20"},
{name:"maodou",age:"20"}
],
people:[
{
name:"张三",
age:18,
score:[
{name:"Math",s:"120"},
{name:"English",s:"110"},
{name:"Chinese",s:"105"}
]
}
]
}
}
}
</script>
二、 vue绑定属性
1.绑定class
传给 v-bind:class 一个对象，以动态地切换 class：
<template>
<div id="app">
<!--
二、1.绑定class
-->
<!--元素属性的绑定-->
<!-- 一般适用于img的src-->
<!-- v-bind 可以简写为 :title -->
<div v-bind:title="title"></div>
<div :title="title"></div>
<!-- 绑定html标签 -->
<div v-html="h"></div>
<!-- 绑定数据的另一种方式 -->
<div v-text="msg"></div>
<!-- 绑定class类名称 -->
<div :class="{'red':cla,'blue':!cla}">
绑定类名称
</div>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
msg: 'Welcome to Your Vue.js App',
obj:{
name:"张三"
},
title:"wo shi biao ti ",
h:"<h1>我是h1</h1>",
cla:true,
}
}
}
</script>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
2.绑定style
<template>
<div id="app">
<!--
二、动态绑定style行内样式
-->
<!-- 基本绑定 -->
<div :style="{'width':w+'px','height':h+'px'}"></div>
<!-- 数组绑定 -->
<div :style="test">123</div>
<div :style="test,test,test">456</div>
<div :style="iscolor?test:''">789</div>
<div :style="[test]">90</div>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
w:40,
h:20,
test:{
color:"red"
},
iscolor:false
}
}
}
</script>
三、vue数据双向、vue事件及事件对象、vue中ref获取dom元素节点以及MVVM
MVVM 结构：MV 指model数据改变影响view；VM指view数据改变影响model
1.数据双向绑定
v-model:绑定表单元素标签的值
<template>
<div id="app">
<!--
三、1.数据双向绑定
v-model:绑定表单元素标签的值
-->
<p>{{msg}}</p>
<!-- 通过界面层修改 model数据层 -->
<input v-model="msg">
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
msg:"我是好人"
}
}
}
</script>
2.vue事件及事件对象
v-bind:事件类型
@事件类型
<template>
<div id="app">
<!--
三、2.事件
-->
<button v-on:click="getMsg">获取修改之后的数据</button>
<!-- 事件绑定的简写方式 -->
<button @click="getMsgLow">获取修改之后的数据</button>
<ul>
<li v-for="(item,index) in lists" :key="index" @click="getuserIndex(item)">
{{item.name+"/"+item.age}}
</li>
</ul>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
msg:"我是好人",
lists:[
{name:"a",age:"13"},
{name:"b",age:"24"},
{name:"c",age:"15"}
]
}
},
methods:{
//写执行的方法 使用es6写
getMsg(){
console.log(this.msg);
},
getMsgLow(e){
//通过事件对象获取当前操作的dom元素节点
let ele=e.target;
console.log(ele);
},
getuserIndex(obj){
console.log(obj);
}
}
}
</script>
3.vue中ref获取dom元素节点
（1）给元素命名:ref
（2）写代码获取:this.$refs.名字
<template>
<div id="app">
<!--
三、3.vue中ref获取dom元素节点
-->
<div ref="block"></div>
<button @click="getDom">获取dom元素</button>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
getDom(){
this.$refs.block.innerHTML="12";
console.log(this.$refs.block);
}
}
}
</script>
4.给元素定义自定义属性
<template>
<div id="app">
<!--
三、4.给元素定义自定义属性
-->
<button data-uid="你好！" @click="getAttribute">获取自定义属性</button>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
}
},
methods:{
getAttribute(e){
let el=e.target;
let id=el.getAttribute("data-uid");
console.log(id);
}
}
}
</script>