vue学习笔记（一）

最新推荐文章于 2024-04-25 22:14:21 发布

xingxindrst

最新推荐文章于 2024-04-25 22:14:21 发布

阅读量96

点赞数 1

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/xingxindrst/article/details/132258311

版权

快速上手

页面基本结构：

<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.

xingxindrst

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue学习笔记（一）

v-html：可以将一个字符串解析为html标签并渲染到模板中，主要用来渲染富文本内容，并且存在xss攻击危险；计算属性有一个缓存的机制：就是计算属性依赖的值不发生改变，计算属性就不会发生计算（优点：减少内存）v-html、v-text的区别：v-html将字符串解析成html标签，v-text不行。函数创建的是一个响应式对象，其中的属性可以直接访问，如user.name.{{}}：插值表达式，最常用，渲染数据的，并且不会对HTML标签进行转义；创建的对象，可以直接访问属性，如。v-once：渲染一次。
复制链接

扫一扫