学vue必需知道的知识点

目录

什么是Vue：

createApp 函数创建一个新的应用实例

Vue模板语法-文本渲染

v-html指令

指令参数

条件渲染

v-show

v-show和v-if的区别

 v-for

key

v-for与v-if一起

监听事件

---

什么是Vue：

“vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。”

createApp 函数创建一个新的应用实例

const app = Vue.createApp({

  data() {

    return { count: 4 }

  }

})

const vm = app.mount('#app')

console.log(vm.count) 

Vue模板语法-文本渲染

指令 是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式

{{ }} 语法

<div> {{msg}}</div>

const app = Vue.createApp({

  data() {return { msg: ‘你好Vue3’ } }

})

const vm = app.mount('#app')

{{ }} 中的表达式

{{ count + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ msg.split('').reverse().join('') }}

v-text指令

指令是带有 v- 前缀的特殊属性

<div v-text="msg"> {{msg}}</div>

v-html指令

<div v-html="raw"></div>

<div v-text="raw"></div>

<div >{{raw}}</div>

指令参数

指令是带有 v- 前缀的特殊 attribute。指令 属性值预期是单个 JavaScript 表达式

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

我们可以使用v-bind指令给html标签动态的绑定属性。

<button v-bind:disabled="canUse">按钮</button>

v-bind可以简写为：

<button :disabled="canUse">按钮</button>

<div :title="title"> 学前端，薪资就是高</div>

Vue 的安装与引用

<script src="https://unpkg.com/vue@next"></script>

Vue 实例

const app = Vue.createApp({...})

const vm = app.mount('#app')

Vue 指令

v-开头的特殊属性

条件渲染

v-else-if 多重条件渲染

<div id="app">

  <div v-if="score>=90">优秀</div>

  <div v-else-if="score>=80">良好</div>

  <div v-else-if="score>=70">中等</div>

  <div v-else-if="score>=60">及格</div>

  <div v-else>不及格，哥们需要努力鸭！</div>

</div>

v-show

另一个用于根据条件展示元素的选项是 v-show 指令

<div v-show="canShow">我喜欢你</div>

v-show和v-if的区别

v-show是通过css方法隐藏节点

v-if直接移除节点的方式隐藏

如果频繁切换显示与隐藏 推荐使用v-show

如果只是偶尔切换显示与隐藏 推荐使用v-if

 v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<li v-for="item in items">

   {{item}}

</li>

data(){

      return {items:['angular','react','vue','jquery']}

}

key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key

<li v-for="(item,index) in items"  key="item.id" >

...

</li>

不建议使用index作为key的值（只要key的值唯一就行）

v-for与v-if一起

注意我们不推荐在同一元素上使用 v-if 和 v-for

可以把 v-for 移动到 <template> 标签中来修正：

<template v-for="todo in todos" :key="todo.name">

  <li v-if="!todo.done">

    {{ todo.name }}

  </li>

</template>

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<button @click="counter++">{{counter}}</button>

<button v-on:click="counter--">{{counter}}</button>

Vue.createApp({

  data() {

    return {   counter: 1   }

  }

}).mount('#app')

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<button @click="say('你好')">问候你好</button>

<button @click="say('吃饭了没')">问候吃饭</button>

Vue.createApp({

        methods:{
            say(msg){alert(msg)}
    } 

}).mount('#app')