Vue笔记1--模板语法和基础结构

1、写在前面

毕业设计准备写一个博客社区的项目，大学期间学的也基本是java相关的知识。这次想要挑战提升一下自己，打算前端使用Vue来实现。但随之而来的尴尬就是现在正是v2和v3交替时期，最新的视频资料是v3但找到项目有大半是v2。按照我已经工作的学长的说法，他最近的项目全是v2，去改成v3太麻烦没有人喜欢。所以这系列用来记录自己学习的博客，前半部分基础会以v2为主后版面部分逐渐过渡到v3。

另外，因为前端不是主要的兴趣方向，可能笔记中的很多都很浅薄和基础，仅仅是作为个人学习的记录。欢迎大家留言交流，指出我的错误给出建议。

vite新建项目

其他几种引入vue的方法，可以见官方文档。

详细图文教程我参考的是：https://blog.csdn.net/uniquepeng/article/details/126541884

一切从简，推荐使用vscode打开想要的文件夹，新建终端：

npm init vite@latest vue-begin01 用这个可以选择js创建而不是ts
cd vue-begin01 cd到项目中使用
npm install 将为开始下载各种依赖
npm run dev 运行

关于第四条命令值得一提的是，我找的很多项目是通过npm run serve启动的。

vscode 常用快捷键：

输入感叹号产生模板
shift+alt+A 快速注释
shift+alt+F格式化代码

项目结构

node_modules 依赖

public 资源文件

src 代码

index 是显示的页面，把App.vue文件里的html内容通过main里调用的挂载方法挂载到index里显示

以上都是最最基础项目结构中的文件夹，后面会陆续增加。

2、模板语法

文本

<script>
export default{
  data(){
    return{
      num:0,
      uname:"zhangsan"
    }
  },
  methods:{
    //给vue定义方法
    changeUname:function(){
      this.uname="lisi"
    },
  }
}
</script>

双大括号标签会被替换为相应的数据，并且是响应式的。v-cone当数据更新时插值内容不变

<span>Message: {{ msg }}</span>
<p v-once>{{uname}}</p>

HTML

v-html使用html代码

<script>
export default{
  data(){
    return{
      msg:"<h1>HHH</h1>",
    }
  }
}
</script>

<template>
  <div>
    <p v-html="msg"></p>
  </div>
</template>

Attribute

动态绑定属性v-bind

双大括号不能在 HTML属性中使用，想要响应式地绑定一个 attribute 就可以使用。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

    <!--v-bind：绑定属性的内容---->
    <p v-bind:id="id">v-bind绑定</p>
    <img v-bind:src="url" alt="">
    <button @click="changeColor">改色</button>
    <button @click="id='d2'">表达式改色</button>

    <!--v-bind语法糖直接用：替代-->>
    <p :id="id">v-bind绑定</p>

使用js表达式

split分成数组reverse对数组反转join成字符串

    <!--javascript表达式 -->
    <p>{{num+1}}</p>
    <p>{{uname.split('').reverse().join('')}}</p>
    <!--js隐式转换此时id会变成d21-->
    <p v-bind:id="id+1">v-bing绑定</p>

指令

事件监听v-on:

监听点击事件，同时语法糖@直接替代

<button v-on:click="changeColor">表达式改色</button>
<button @click="changeColor">表达式改色</button>

动态参数

d1 是id选择器 .d1是类选择器

经过点击事件选用类选择器的d1字体边50px

 <p v-bind:[attributeName]="id">v-bind</p>
 <button @click="attributeName='class'">改变属性</button>

#d1{
  color: rgb(255, 0, 0);
}
.d1{
  font-size: 50px;
}

在个例子中组件实例有一个数据属性 attributeName，点击按钮后其值为 "class"，那么这个就等价于 v-bind:class="id"。

动态事件

    <button @[nouseEvent]="attributeName='class'">改变属性</button>
    <button @click="nouseEvent='mouseover'">改变事件</button>

点击按钮后就等价于 @mouseover=。

3、Vue结构

export default{
  data(){数据},
  methods:{方法},
  computed:{计算属性},
  watch:{监听数据的变化},
}

data:

是一个函数，返回是一个对象。所以你所需要的数据就写在里面。

方法methods:

包含组件的方法，this指向组件实例

export default{
  data(){
    return{
        count:0,
        ...
    }
  },
  methods:{
    increase(){
      this.count++,
      ...
    } 
  }
}

methods在组件模板中被访问，通常用作监听事件

<button @click="increase">自增</button>

计算属性computed:

计算属性

<p>{{uname.split('').reverse().join('')}}</p>

逻辑太复杂不推荐，改为使用计算属性。

export default{
  data(){
    return{
      message:"helloWorld",
      age:0
    }
  },
  computed:{//计算属性
    reverseMsg:function(){
      return this.message.split('').reverse().join('')
    }
    //简写publishedReverseMsg(){}
  },
  methods:{
    reverseMessage(){
      return this.message.split('').reverse().join('')
    }
  }
}

当作一个属性来使用，而不是方法不需要带括号

    <p>{{message}}</p>
    <p>{{message.split('').reverse().join('')}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>

计算缓存

通过console.log();监控可以发现：

当message值没有改变的时候，reverseMsg计算过一次数据就会定下来，reverseMessage调用几次计算几次。

computed相比于methods大大提高性能。

计算属性set和get

{{reverseMsg}}相当于直接调用了reverseMsg.get()

  computed:{/
    //---简写---
    // reverseMsg:function(){
    //   console.log("计算属性");
    //   return this.message.split('').reverse().join('')
    // }
    //每一个计算属性中都会有一个getter和setter
    //---完整写法---
    reverseMsg:{
      set:function(newValue){//用的少，只读，在设计or更改计算属性的时候调用
        console.log(newValue);
      },
      get:function(){
        return this.message.split('').reverse().join('');
      }
    }
  }

监听器watch:

通过watch响应数据变化，执行异步or开销较大的时候

当message变化的时候就会执行，一个数据影响多个数据

message:function(newValue,oldValue)函数，两个参数分别对应新旧数据

export default{
  data(){
    return{
      message:"helloWorld",
      age:0
    }
  },
  methods:{
  },
  watch:{//监听数据的变化
    message:function(newValue,oldValue){
      console.log(newValue);
      console.log(oldValue);
      //执行异步操作，或者复杂的逻辑代码
    }
  }
}

例子1

  watch:{//监听数据的变化
    //每当message变化的时候就执行下面函数
    message:function(newValue,oldValue){
      console.log(newValue);
      console.log(oldValue);
      //执行异步操作，或者复杂的逻辑代码
      if(newValue.length<5 || newValue.length>10){
        console.log("输入框内容在啊5-10之间")
      }
    }
  }

例子2

此时message是个对象，适用于检查从后端获取的初始值

    message:{
      immediate:true,//表示初始化的时候就调用函数
      handler:function(newValue){//handler表示监听函数
        if(newValue.length<5 || newValue.length>10){
          console.log("输入框内容在啊5-10之间")
        }
      }
    }

例子3深度监听

这种写法是无效的，监听不到对象之中属性的变化

watch:{
    message:{
        ...
    },
    //这种写法监听不到对象之中属性的变化
    user:function(newValue){
      console.log(newValue);
    },
  }

使用深度监听deep，但是一层一层遍历很消耗资源

  watch:{
    message:{
      ...
    },
    //这种写法监听不到对象之中属性的变化
    // user:function(newValue){
    //   console.log(newValue);
    // },
    //需要使用深度监听deep
    user:{
      deep:true,//表示进行深度监听
      handler:function(newValue){
        console.log(newValue);
      },
    },
  }

优化只监听name，通过字符串监听

    "user.name":{
      deep:true,//开启深度监听，但只监听name
      handler:function(newValue){
        console.log(newValue);
      },
    },

posted @ 2022-12-09 15:15 北溟有咸其名为鸽阅读(55) 评论(0) 收藏举报

刷新页面返回顶部

TimothyWen