一、创建vue对象
new Vue({
el:'#root', //指定根element
data:{
// 初始化数据(页面可以访问)
name:'wangchao',
address:'合肥'
}
})
// el和data的另外一个写法
// el:
const v = new Vue({
data:{
name:'haha'
}
})
v.$mount('#root')
// data:
data(){
console.log('@@@',this) //this的指向是vue实例对象
return {
name:'wangchao'
}
}
二、数据的双向绑定
2.1 v-model & 显示数据: {undefined{xxx}}插值语法
<body>
<input type="text" v-model="msg"><br><!--指令-->
<p>Hello {
{
msg}}</p><!--大括号表达式-->
</div>
<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
// 配置对象 options
// 配置选项(option)
el: '#test', // element: 指定用vue来管理页面中的哪个标签区域
data: {
// 数据(model)
msg: 'World'
}
})
</script>
</body>
2.2 插值语法和指令语法
插值语法:{
undefined{
xxx}},xxx是js表达式,且可以直接读取到data中的所有
指令语法:强制数据绑定 v-bind: 、 绑定事件监听 v-on,用于解析标签(包括:标签属性、标签体内容、绑定事件…)
举例:v-bind:href=“xxx”或 简写为 :href=“xxx”
备注:Vue中有很多的指令,且形式都是:v-???
2.3 单向数据绑定和双向数据绑定
单向:
语法:v-bind:href ="xxx" 或简写为 :href ="xxx"
双向:
语法:v-mode:value="xxx" 或简写为 v-model="xxx"
2.4 绑定事件监听 v-on:
一般:
v-on:click='xxx' / v-on:keyup='xxx(参数)' / v-on:keyup.enter='xxx'
简写:
@click='xxx' / @keyup='xxx' / @keyup.enter='xxx'
2.5 v-text
与插值语法的区别:v-text会替换掉节点中的内容,{
{
xx}}则不会。
2.6 v-html
向指定节点中渲染包含html结构的内容。与插值语法的区别:
(1).v-html会替换掉节点中所有的内容,{
{
xx}}则不会。
(2).v-html可以识别html结构。
2.7 条件渲染指令
v-if="表达式"v-else-if="表达式"v-else="表达式"
特点:不展示的DOM元素直接被移除。
2.8 v-show
v-show="表达式"
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
备注:使用v-if的时候,元素可能无法获取到,而使用v-show一定可以获取到。
三 、计算属性-监视属性-双向绑定
3.1 computed计算属性
定义:要用的属性不存在,要通过已有属性计算得来。
原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
3.2 watch监视属性
1.通过vm对象的$watch()或watch配置来监视指定的属性,当属性变化时, 回调函数自动调用, 在函数内部进行计算
2.监视的两种写法:
(1). new Vue时传入watch配置
(2). 通过vm.$watch监视
3.深度监视:
vue中的watch默认不监测对象内部值的改变(一层),Vue自身可以监测对象内部值的改变.
配置deep:true可以监测对象内部值改变(多层)。
3.3 计算属性与监视属性的区别
computed能完成的功能,watch都可以完成;watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
两个小原则:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。
3.4 class样式绑定和style绑定
class:
定义:某个(些)元素的样式是变化的,class/style 绑定就是专门用来实现动态样式效果的技术
:class='xxx' // xxx可以是字符串、对象、数组。
style:
:style="{ color: activeColor, fontSize: fontSize + 'px' }" // 绑定的对象、绑定的数组、属性
案例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定样式</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy {
border: 4px solid red;
;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.itw1 {
background-color: yellowgreen;
}
.itw2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.itw3 {
border-radius: 20px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{
{
name}}</div>
<!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
<!-- 绑定class样式