环境引入
//开发版本:
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>{{name}}</span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app", //el指的是作用的具体范围，不推荐指定在body和html上
data:{
//用于存放数据，存放的数据可以放在el指定范围的任何位置
//一个页面只允许存在一个vue实例
//data中的属性在{{}}中可以进行逻辑运算，算数运算，和其属性对应的方法
name:"gzy",
message:"欢迎您"
},
methods:{ //methods 用来定义vue中时间
changeage:function(){
alert('点击触发');
this.age//代表当前vue实例
this.aa();//代表调用方法
},
aa:function(){}
}
});
</script>
</html>
# 总结:
1.vue实例(对象)中el属性:代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法
2.vue实例(对象)中data属性:用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器 注意: el属性值不能指定body或html标签
v-text
<span v-text="message"></span>
# 总结
1.{{}}(插值表达式)和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁 插值闪烁就是先看到插值表达式原样输出，后看到渲染后的样子
v-html
<span v-html="message"></span>
用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部
使用v-html取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
v-on
<input type="button" value="点我改变年龄" v-on:click="changeage">
# 总结:
事件的组成 事件源:发生事件dom元素 事件: 发生特定的动作 click.... 监听器 发生特定动作之后的事件处理程序 通常是js中函数
1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click
2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名
3.在vue中事件的函数统一定义在Vue实例的methods属性中
4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据 调用methods中相关方法
5.vue中绑定事件语法可以简化为@事件命， eg： v-on:click ==> @click
6.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数
v-show
用来控制页面中某个标签元素是否展示
<h2 v-show="false">欢迎你的加入!</h2>
# 总结
1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
2.在v-show中可以通过boolean表达式控制标签的展示和隐藏
3.v-show隐藏标签是通过底层css样式的display：none控制的
v-if
用来控制页面元素是否展示
<h2 v-if="false">欢迎你的加入!</h2>
# 总结
v-if控制标签隐藏时通过操作dom树删除节点控制的
变化快时可以使用v-show，变化慢时可以使用v-if
v-bind
用来绑定标签的属性从而通过vue动态修改标签的属性
<img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" src="" alt="">
vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名
v-for
作用就是用来对对象进行遍历的(数组也是对象的一种)
在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key
<!-- item 元素 index索引-->
<ul>
<li v-for="(item,index) in list">
{{index + 1}} ==> {{item}}
</li>
</ul>
<hr>
<!-- value值 key键 index索引-->
<ul>
<li v-for="(value,key,index) in user">
{{index}} ==> {{key}} ==> {{value}}
</li>
</ul>
v-model
作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制,常用于表单
<input type="text" v-model="message">
# 总结
1.使用v-model指令可以实现数据的双向绑定
2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定
# MVVM架构 双向绑定机制
Model: 数据 Vue实例中绑定数据
VM: ViewModel 监听器
View: 页面 页面展示的数据
事件修饰符
作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制
<input type="button" value="按钮" @click.stop="btnClick">
# 1.常用的事件修饰符
.stop 停止冒泡行为
.prevent 阻止默认行为
.self 只触发自身事件
.once 只触发一次
按键修饰符
用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符
<input type="text" v-model="msg" @keyup.enter="keyups">
# 按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
