目录
什么是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>
<script src="https://unpkg.com/vue@next"></script>
const app = Vue.createApp({...})
const vm = app.mount('#app')
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')