本文介绍了Vue.js的基础概念和常用指令，包括data和el用于数据和视图绑定，methods存放方法，以及差值表达式、v-text和v-html。还详细讲解了v-bind的简写、v-on事件绑定及事件修饰符如.stop和.prevent。此外，提到了v-model的双向数据绑定和样式的使用，包括class和内联样式的动态应用。最后讨论了v-for循环和key属性，以及v-if和v-show的条件渲染差异。
vue代码结构;
data：存放数据
el：这个控制是哪块视图
methods：放我们的方法
1.差值表达式:
插值表达式{{}}，可以在前后插入一些内容,里面也可以是简单的运算式
v-text：会替换掉元素里的内容
v-html：可以渲染html界面
<div id="app">
<p v-html='html'></p>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
html:'<h1>这是一个很大的标题</h1>'
}
})
2.v-bind 简写：
界面元素属性值的绑定
括号里不加引号的都是我们data里的数据读取
如果想使用字符串需要加上引号
里面可以写表达式
里面也可以调用定义好的方法，拿到的是方法的返回值
<button v-bind:title="nihao">按钮</button>
var vm = new Vue({
el: '#app',
data: {
title:'hello vue'
}
})
3.v-on 简写@
进行事件的绑定，我们用的最多的是click事件绑定
<button @click='didiao'>低调</button>
4.事件修饰符
a).stop 阻止冒泡
冒泡从内像外 可对单个标签或者多个使用，但不会影响全局冒泡
b).prevent 阻止默认事件
例如a标签的跳转，可以阻止
c).capture 添加事件侦听器时使用事件捕获模式
捕获模式从外到内 可对单个多个使用 如果冒泡为1-2-3 在3加上捕获，则结果是3-1-2
d).self 只当事件在该元素本身（比如不是子元素）触发时触发回调
可对单个多个使用 在2加上self事件，则结果是 2-1-3
e).once 事件只触发一次
4. v-model数据双向绑定
a)作用：数据双向绑定
b)注意：绑定的是表单控件
两种表达方式：
v-model:value='value1' V-model=’value1’简写
<div id="app">
<input type="text" v-model="value1">
<select v-model="op">
<option >+</option>
<option >-</option>
<option >*</option>
<option >/</option>
</select>
<input type="text" v-model="value2">
<button @click="getmath">=</button>
<input type="text" v-model="num">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
value1:'',
value2:'',
op:'+',
num:''
},
methods:{
getmath(){
this.num=eval(this.value1+this.op+this.value2)
}
}
})
</script>
5.Vue中样式的使用
(1)使用class样式:
a)数组
b)三木表达式
c)数组内置对象（对象的键是样式的名字，值是Boolean类型）
d)直接通过对象
<style>
.first {
color: red;
}
.second {
font-size: 25px
}
</style>
</head>
<body>
<div id='app'>
<p class="first second">这是一段文字...</p>
<!-- 使用vue设置多个样式的时候可以使用数组 -->
<p :class="[pClass,flag?'second':'']">这是一段文字...</p>
<!-- 当我们根据某个条件显示某个样式的时候可以使用对象的方式 -->
<!-- 对象里的键就是我们显示的样式，值是个bool类型，就是我们是否显示这个样式 -->
<p :class="[pClass,{'second':flag}]">这是一段文字...</p>
<!-- 直接使用对象，对象里的键就是我们显示的样式，值是个bool类型，就是我们是否显示这个样式 -->
<p :class="{'first':false,'second':true}">这是一段文字...</p>
</div>
<!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
pClass: 'first',
flag: true
}
})
</script>
(2)使用内联样式
1.直接在元素上通过 :style 的形式，书写样式对象
2.将样式对象，定义到 data 中，并直接引用到 :style 中
a)在data上定义样式
b)在元素中，通过属性绑定的形式，将样式对象应用到元素中
3.在 :style 中通过数组，引用多个 data 上的样式对象
a)在data上定义样式
b)在元素中，通过属性绑定的形式，将样式对象应用到元素中
<div id="app">
<!-- 插值表达式，可以读取我们的变量 -->
<!-- !!!键如果包含-的话，我们必须要加上引号 -->
<div :style="{'font-size':'32px'}">{{message}}</div>
<div :style="textStyle">{{message}}</div>
<div :style="[textStyle,textStyle2]">{{message}}</div>
<div :style="getStyle(2)">{{message}}</div>
</div>
<!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
textStyle: {
color: 'red',
'font-size': '50px'
},
textStyle2: {
'font-weight': '600'
}
},
methods: {
getStyle(num) {
let obj = {
color: 'red',
'font-size': '50px'
};
if (num == 1) {
obj.color = 'red'
} else {
obj.color = 'green'
}
return obj
}
},
})
</script>
6.V-for和key属性
a)遍历数组，参数(item,index) in list
b)遍历对象，参数(value,key,index) in list
c)遍历数字，num in 10 (1~10)
d)key在使用v-for的时候都需要去设置key
e)让界面元素和数组里的每个记录进行绑定
f)key只能是字符串或者数字
g)key必须是唯一的
7.v-if与v-show区别
a)区别：
v-if删除会dom元素
v-show设置display:none
b)应用场景：
v-if只修改一次的时候可以使用v-if
补充：
v-if 也可用作判断,但需注意的是,v-if,v-elseif,else必需连用
v-show频繁切换的时候可以使用v-show
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
