1. VUE的开发方式
-
选项式(vue2推出的)
-
组合式(vue3推出的)
-
响应式数据： * 数据发生改变视图也改变
2. Vue的内置指令
<!--
vue2中if和for不能一起用因为for的优先级高于if他会先循环最后在判断就会出问题，
vue3可以连在一起用因为if的优先级高于for但是不建议用
-->
<div id="app">
<p>{{msg}}</p>
<!-- v-text语法：可以渲染标签内容但是识别不了标签 -->
<p v-text="msg2"></p>
<!-- v-html语法：可以渲染页面也能识别标签但是可以识别script标签所以不安全 -->
<h1 v-html = 'sty'></h1>
<!-- v-bind 给标签绑定一些属性,如果要给多个属性需要用:隔开 -->
<h1 v-bind:text="tittle" :class="tittle2">222</h1>
<!-- v-bind的简写语法是： -->
<h1 :text='tittle'>111</h1>
<!-- v-on 给标签绑定一些 方法(函数) -->
<button v-on:click = 'setCount'>count:{{count}}</button>
<!-- v-on的简写语法是@ -->
<button @click = 'setCount'>count:{{count}}</button>
<!-- v-show语法：满足条件之后会显示 -->
<!--
v-if
通过一个条件, 决定是否加载当前标签, 条件不满足的时候这个标签就不加载
if 的后边可以跟着 else-if或者else
但是注意, 开始必须是 v-if, 结尾必须是 v-else
中间不能书写其他标签
-->
<!--
1. v-if 是通过 控制是否加载当前 DOM 节点, 实现当前标签的展示与隐藏
2. v-show 是通过 控制当前标签的 CSS 样式, 决定是展示还是隐藏
3. v-if可以有 v-else/v-else-if 但是 v-show 没有 -->
<h2 v-if="count>10">我展示的话说明count大于10</h2>
<h2 v-else-if="count>5">我展示的话说明count大于5小于10</h2>
<h2 v-else>我展示的话说明上述条件都不满足</h2>
</div>
<script>
const app = Vue.createApp({
data() {
return {
msg:'我是一个msg信息',
msg2:'我是另一个信息',
tittle:'abc',
tittle2:'def',
sty:'<span style="color:red">我是渲染标签</span>',
count:0
};
},
methods: {
setCount(){
this.count++
}
},
})
app.mount('#app')
</script>
<ul>
<!-- v-for='(item,index) in obj' 可以遍历生成数据，可以遍历数组对象或者一个范围值比如10可以生成1-10共计十条数据 -->
<li v-for="item in obj">{{item}}</li>
<li v-for="(item,index) in obj">{{item}}---{{index}}</li>
<li v-for="item in list">{{item}}</li>
<li v-for="item in 10">{{item}}</li>
</ul>
<!-- 动态属性 :[变量名]='属性值' -->
<a :[a]="b"></a>
3. Vue的响应式
<body>
<div id="app">
<button @click="setCount">count的值:{{count}}</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
count: 1,
};
},
methods: {
setCount() {
this.count++
console.log(document.querySelector('button').innerText)
Vue.nextTick(() => {
console.log(document.querySelector('button').innerText)
})
}
},
})
/*
*不要在VUE中直接修改DOM原因:
* 在 vue 中数据改变后并不是直接把 DOM 上的内容修改了
*
* 在 vue 中有一个叫做 '虚拟DOM' 的内容, 我们修改完数据后, vue 会将 '虚拟DOM'修改
* 改完后 vue 会利用一个 DIFF 算法的东西, 帮我们对比 新旧两个 虚拟DOM 之间的差异
*
* 找到不同的地方后, vue 会将 改变后的一小部分真实 DOM 修改, 剩下的原封不动
*
* 虚拟DOM: 其实就是利用 JS 对象描述的 DOM 树
*/
// 如果想要拿到 真实DOM 修改完毕后的值, 可以放在一个倒计时器中, 将时间调整为0 10 20
// 点击完成 -> 修改虚拟dom -> diff 算法对比 -> 修改真实DOM -> qwe -> asd -> 倒计时器
// setTimeout(() => {
// console.log('倒计时器中打印: ', document.querySelector('h1').innerText)
// }, 0)
// nextTick(()=>{}) 可以在修改真实DOM刚完成后进行
app.mount('#app')
</script>
</body>
4. 计算属性
<script>
/**
* 计算属性:
* 使用的时候需要在 配置项 computed 中书写一个 计算属性
* 在写的时候有点类似于 methods 中的函数, 但是使用的时候请切记, 不要加小括号
*
* 计算属性在首次打开页面的时候会执行一次, 后续的执行需要一个前提条件
* 就是计算属性内部的 响应式数据发生变化的时候才会修改
* 计算属性中可以书写多个响应式数据, 其中一个发生变化的时候, 这个计算属性就一定会再次执行
*
* 多对一, 多个数据会影响一个数据的变化
*/
const app = Vue.createApp({
data() {
return {
count: 1,
msg:'奇数'
};
},
// methods: {
// setCount() {
// const num = Math.floor(Math.random() * 2) // 得到一个 0 或者 1 的随机数
// this.count = num
// console.log(this.count)
// }
// },
// computed:{
// computedMsg(){
// return msg=this.count?'奇数':'偶数'
// }
// }
methods: {
setCount() {
const num = Math.floor(Math.random() * 2) // 得到一个 0 或者 1 的随机数
console.log('此时 this.count 的值为: ', num)
this.count = num
// this.setMsg()
},
setMsg() {
console.log('调用我的时候, 会根据 this.count 最新的值, 决定修改 this.msg 为什么')
this.msg = this.count ? '奇数' : '偶数'
}
},
computed: {
// 在这内部书写你的计算属性
computedMsg() {
/**
* 计算属性虽然写的时候根一个函数一摸一样, 但是使用的时候请不要加小括号,他是一个属性不是函数
*
* 计算属性是有缓存性的, 只有内部的响应式数据变化的时候, 他才会执行
*/
console.log('如果我输出了, 说明计算属性重新执行了一次')
console.log(this.count2) // 哪怕只有一个输出, 也算是在这个计算属性内, 使用了这个响应式数据
// console.log(this.count3) // 哪怕只有一个输出, 也算是在这个计算属性内, 使用了这个响应式数据
// console.log(this.count4) // 哪怕只有一个输出, 也算是在这个计算属性内, 使用了这个响应式数据
return this.count ? '奇数' : '偶数'
}
}
})
app.mount('#app')
</script>
-
计算属性相较于函数的好处： * 计算属性会先进行判断，只有内部的响应式数据变化的时候, 他才会执行，这样缓存少 * 代码量少
-
计算年龄，改变只读属性方法 ```js computed: { // 如果想要计算属性可以被设置, 这种写法是不能完成的 // age() { // return new Date().getFullYear() - this.year // }
age: { get() { // 如果你访问计算属性 age 的时候, 会触发 get 函数 return new Date().getFullYear() - this.year }, set(val) { // 如果你想修改 计算属性 age 的值, 会触发 set 函数, 并且将你想要修改的值 给到 这个函数的形参 this.year = new Date().getFullYear() - val } }}, ```
