快速上手
页面基本结构:
<template>
<div id="app">
<span v-html="name"></span> <!--写在标签里面 v-text不转义-->
<br>
{{ message }}
<br>
<button @click="change">更改name的值</button> <!-- @添加事件-->
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
name:'<b>shaka</b>',
message:'hello'
}
},
methods:{
change(){
this.name='aftert change'
}
}
}
</script>
<style></style>
v-html:可以将一个字符串解析为html标签并渲染到模板中,主要用来渲染富文本内容,并且存在xss攻击危险;
v-text:将数据绑定到模板中,它会替换目标元素的文本内容,防止xss攻击;
v-html、v-text的区别:v-html将字符串解析成html标签,v-text不行
{{}}:插值表达式,最常用,渲染数据的,并且不会对HTML标签进行转义;
添加事件用@ @click=“change”
v-once:渲染一次
计算属性与监听器
计算属性有一个缓存的机制:就是计算属性依赖的值不发生改变,计算属性就不会发生计算(优点:减少内存)
methods与computed的区别:
1.computed有缓存机制,而且它是一个属性
2.方法还是一个函数,需要去调用()
<template>
<div id="app">
<!-- 第一种方法使用{{ changeName() }} -->
{{Changename}}
<br>
<input type="text " v-model="name">
<br>
<input v-model="Changename">
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
message:'hello ',
message1:'world!',
name:'shaka'
}
},
methods:{
// 第一种方式:写方法
changeName(){
return this.message
}
},
computed:{
//第二种方式:计算属性 生成的name是属性(调用直接使用{{name}})
Changename(){
return this.message+this.message1
}
},
//watch完全可以替代computed computed可以适用于一些简单的情况 watch用来侦听
watch:{
//监听旧的值和新的值 监听name的值
name(newVal,oldVal){
console.log(newVal,oldVal);
},
}
}
</script>
<style></style>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
</head>
<body>
<script>
const { createApp, ref } = Vue //从 Vue 对象中提取了 createApp 和 ref 函数
createApp({
setup() { //用于设置组件的状态和行为
const message = ref('Hello vue!') //ref 函数来创建一个响应式变量
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>
<!-- import { reactive } from 'vue'
const user = reactive({
name: 'John',
age: 30
}) -->
ref
和 reactive
都是用于创建
响应式数据的函数,它们的区别:
1.ref函数创建的是一个包装器对象,它会将数据包装在 .value
属性中,如count.value,reactive
函数创建的是一个响应式对象,其中的属性可以直接访问,如user.name.
2.对于ref创建的变量,需要使用 .value来访问其值,如count.value,对于 reactive
创建的对象,可以直接访问属性,如 user.name.
3.ref
适用于单一值的响应式数据,比如数字、字符串等简单的数据类型,reactive
适用于复杂对象或需要使用多个属性的情况,比如对象、数组等.
如果你只需要一个简单的响应式变量,可以使用 ref
。如果你需要管理一个更复杂的对象,可以使用 reactive.