欢迎大家阅读本篇文章，相信很多人之前只是听说过Vue并浅浅的了解过，现在本博主带大家一起了解一下Vue的用处以及隐藏小知识。
Vue 是一套用于构建用户界面的渐进式框架。它的特点就是简单、高效，生态丰富（插件多）。简单的介绍就到这里吧，接下来带大家走进Vue，一起看下丰富多彩的框架世界。
一、创建应用实例
用createApp 函数创建一个新的应用实例，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个vue案例</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
hello Vue!
</div>
<script>
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
</script>
</body>
</html>
二、Vue模板语法-文本渲染
这里我们介绍一下模板语法，指令 是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式
文本渲染-{{}}
{{}}语法
<div> {{msg}}</div>
const app = Vue.createApp({
data() {return { msg: ‘你好Vue3’ } }
})
const vm = app.mount('#app')
{{}}中的表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。如：
{{ count + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ msg.split('').reverse().join('') }}
但是每个绑定都只能包含单个表达式，所以下面的例子都不会生效
<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
文本渲染 v-text指令
v-text指令 是带有 v- 前缀的特殊属性。
<div v-text="msg"> {{msg}}</div>
v-html指令 为了输出真正的 HTML，你需要使用v-html
<div v-html="raw"></div>
<div v-text="raw"></div>
<div >{{raw}}</div>
三、Vue模板语法-属性渲染
指令参数
指令是带有 v- 前缀的特殊 attribute。指令 属性值预期是单个 JavaScript 表达式
一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：
<div v-bind:title="title"> 学前端，头发掉的没有那么多</div>
属性渲染
我们可以使用v-bind指令给html标签动态的绑定属性。
<button v-bind:disabled="canUse">按钮</button>
// v-bing可以简写为:
<button :disabled="canUse">按钮</button>
<div :title="title"> 学前端,头发掉的没有那么多</div>
四、条件渲染
条件渲染 v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染。
<div v-if="isLogin">你好，木木！</div>
// 也可以用 v-else
<div v-else>请登录后操作</div>
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 移除dom节点方式隐藏 频繁切换用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']}
}
你也可以用 v-for 来遍历一个对象的 property。
<li v-for="value in obj">
{{value}}
</li>
data(){
return {obj:{title:"Vue3.0入门",author:"木木",pdate:"2022-3-1"}}
}
// v-for 还支持一个可选的第二个参数，即当前项的索引。
<li v-for="(item,index) in items" >
{{index}}-{{item}}
</li>
data(){
return {items:['angular','react','vue',jquery]}
}
v-for 唯标识符 key
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key
<li v-for="(item,index) in items" key="item.id" >
...
</li>
不建议使用index作为key的值（只要key的值唯一就行）
v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
<div v-for="n in 10" :key="n">{{ n }} </div>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 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<button @click="greet">问候</button>
Vue.createApp({
data(){return{name:'vue'}},
methods: { greet(event){
alert('你好'+this.name)
} }
}).mount('#app')
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
<button @click="say('你好')">问候你好</button>
<button @click="say('吃饭了没')">问候吃饭</button>
Vue.createApp({
methods:{
say(msg){alert(msg)}
}
}).mount('#app')
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
