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