⼀、vue基础语法（轻松⼊门vue）
Vue基础语法
喜欢不要忘了点个赞哟
Vue是⼀套⽤于构建⽤户界⾯的渐进式框架
Vue的核⼼库只关注视图层，不仅容易上⼿，还便于与第三⽅既有项⽬整合
⼀、HelloWord
1. 引⼊vue.js
2. 创建⼀个带有id的dom
3. 编写vue实例，el挂载点对应HTMLdom，data表⽰vue实例中的数据
<!--挂载点、模板、与实例 #app这个dom节点在此处为⼀个挂载点、{{hello}}叫做插值表达式属于模板、vue为⼀个实例--> <script src="vue.js"></script>
<div id="app">
{{hello}}
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
loweight
hello:"Hello Vue"
}
})
</script>
⼆、MVVM设计思想
1. M(model) 模型----JavaScript Object 数据
2. V(view) 视图----DOM树、HTML
3. VM(view-model) 控制:
1. view->model : Dom.listeners事件监听
2. model->view : data bindings数据绑定
三、指令
本质就是⾃定义属性
Vue中指定都是以 v- 开头
1. v-cloak
防⽌页⾯加载时出现闪烁问题
这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}⼀起⽤时，编译结束前标签⼀直有v-cloak属性。
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<div v-cloak>
{{hello}}
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:"Hello Vue"
}
})
</script>
2. v-text
更新元素的 textContent（标签内⽂字）。如果要更新部分的 textContent ，需要使⽤ {{ Mustache }}（插值表达式） 插值。
<div id="app">
<div v-text="hello">
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:"Hello Vue"
}
})
</script>
3. v-html
更新元素的 innerHTML (html标签会被编译)。注意：内容按普通 HTML 插⼊ - 不会作为 Vue 模板进⾏编译 。如果试图使⽤ v-html 组合模板，可以重新考虑是否通过使⽤组件来替代。
<div id="app">
<div v-html="hello">
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:"<h1>Hello Vue</h1>"
}
})
</script>
4. v-show
根据表达式之真假值，切换元素的 display CSS 属性。
当条件变化时该指令触发过渡效果。
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
<div id="app">
<div v-show="ok" v-html="hello"></div>大写字母歌
<div v-show="no" v-html="hello"></div>
alone是什么意思</div>
<script>
var vue = new Vue({
el:"#app",
data:{
ok:true,
no:fal,
hello:"<h1>Hello Vue</h1>"
}
})
</script>
4. v-pre
跳过这个元素和它的⼦元素的编译过程。可以⽤来显⽰原始 Mustache 标签。跳过⼤量没有指令的节点会加快编译。
<div id="app">
<!-- 显⽰的是{{ hello }}跳过编译过程 -->
<span v-pre>{{ hello }}</span>
</div>
<script>
ivmvar vue = new Vue({
el:"#app",
data:{
hello:"Hello Vue"
}
})
</script>
5. v-once
只渲染元素和组件⼀次。随后的重新渲染，元素/组件及其所有的⼦节点将被视为静态内容并跳过。这可以⽤于优化更新性能。
<div id="app">
<!-- 只在第⼀次加载渲染，当你改变hello的值的时候，前端显⽰不会发⽣改变 -->
<span v-once>{{ hello }}</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:"Hello Vue"
}
})
</script>
6. v-model（双向数据绑定）
当数据发⽣变化的时候，视图也就发⽣变化
当视图发⽣变化的时候，数据也会跟着同步变化
<div id="app">
<input v-model="hello">
<div>{{hello}}</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:""
}
})
</script>
7. v-on
1. v-on 指令⽤法
<input type=‘button' v-on:click='num++'/>月份英文12个
2. v-on 简写形式
<input type=‘button' @click='num++'/>
3. 直接绑定函数名称
<button v on:click='say'>Hello</button>
4. 调⽤函数
<button v on:click='say()'>Say hi</button>
demo
<div id="app">
<button v-on:click="handelClick">弹出</button>
<button v-on:click="num++">{{num}}</button>
<button @click="num++">{{num}}</button>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{trustin
hello:"<h1>Hello Vue</h1>",
num:0,
},
methods:{
handelClick:function () {
alert("haha");
}
}
})
</script>
5. 事件函数参数传递
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第⼀个参数
如果事件绑定函数调⽤，那么事件对象必须作为最后⼀个参数显⽰传递，并且事件对象的名称必须是$event <button v-on:click='say("hi",$event)'>Say hi</button>
demo
<div id="app">
deer
<button v-on:click="handle1">点击1</button>
<button v-on:click="handle2(12,$event)">点击2</button>
delete</div>
<script>
var vue=new Vue({
el:"#app",
sala
data:{
},
methods:{
handle1:function (event) {
alert(event.target.innerHTML);
},
handle2:function (p1,event) {
alert(p1+event.target.innerHTML);
}
}
})
</script>
事件修饰符
.stop阻⽌冒泡（阻⽌⽗级dom节点的事件被触发）
<a v-on:click.stop= "handle"> 跳转 </a>
.prevent阻⽌默认⾏为（a不会触发跳转）
<a v-on:click.prevent="handle"> 跳转 </a>
demo
<div id="app">
<div v-on:click="handelClick">
<button v-on:click="handelClick">弹出两次</button>
</div>
<div v-on:click="handelClick">
eing<button v-on:click.stop="handelClick">弹出⼀次</button>
</div>
<a v-on:click="handelClick" href="blog.csdn/qq_38723677">跳转</a>
<a v-on:click.prevent="handelClick" href="blog.csdn/qq_38723677">不会跳转</a>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:"<h1>Hello Vue</h1>",
num:0,
},
methods:{
handelClick:function () {
alert("莫逸风");
}
}
})
</script>
按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：.enter回车键
