1.Vue基础(@事件名+v-show+created+v-bind)
Vue基础
文章目录
- Vue基础
- 一.Vue简介
- 1.定义：
- 2.特点：
- 3.建立vue程序步骤
- 二.Vue的常用指令
- 1.v-text和v-html
- 2.`v-show`和v-if显示和隐藏数据
- 3.v-on和`@事件名`触发事件
- 4.v-bind设置元素属性
- 5.`created`页面加载运行的代码块
- 6.v-for
- 7.`v-model`双向绑定
一.Vue简介
1.定义：
javaScript渐进式框架，方便操作页面的数据，显示数据
2.特点：
- 响应式编程，页面的数据和js的数据是互相绑定的，当其中一个值发生变化，对应的值也会变化
- 组件化，可以把页面元素功能封装起来(java的方法)
3.建立vue程序步骤
-
引入vue.js文件
<!-- 引入js文件 --> <!-- 第一步：引入vue.js文件 第二步：在body中定义div容器，并且绑定id 作用 （展示数据） 第三步：定义vue对象作用(定义数据，操作数据) 写vue的目的：定义数据，操作数据，显示数据 --><script src="../js/vue.js"></script> -
html>>body中声明元素
<div id="app"><!-- 插值表达式{{属性名}},直接获取的是数据第一级的 -->{{name}}<span>{{person.id}}</span><!-- 三元表达式 ,sex==1就是男,否则就是其他--><h3>{{person.sex==1?"男":"其他"}}</h3><!-- 通过下标索引拿到具体对象>>属性 --><h3>{{cars[0].engine}}</h3></div> -
script标签内声明vue对象
<script>// 申明一个数组arraylet arr = [{ name: "arrn", age: 18 }, { name: "jerry", age: 19 }]console.log(arr[1].name);//通过下标获取具体数组内容// 申明一个对象let obj = {id: 1,name: "Arran",age: 18}console.log(obj.name);// 控制台输出console.log(1111);new Vue({el: "#app", //element指定vue对象操作的元素data: {//声明数据name: "hello!!!",person: {id: 1,name: "arran",age: 18,sex: 1},cars: [{ brand: "大众", engine: "200cc" }]},methods: {//定义方法,操作数据}}) </script>
vue对象作用域范围: Array, object,string…
二.Vue的常用指令
this指向vue对象
1.v-text和v-html
<div v-html="sex1"></div>
-
v-text:更新数据内容,直接更新文本
sex1:"女" //输出女 -
v-html: 替换文本同时会解析html标签
sex1: '<span style="color: red">男</span>' //输出: 男(红色)
2.v-show和v-if显示和隐藏数据
- v-show是css样式控制display
- v-if是删除dom元素
<div id="app"><!-- v-show="flag" 属性值为true则显示否隐藏 --><!-- v-show和v-if区别: 1.show使用css样式隐藏,适用频繁调用;2.if使用注释删除 --><img v-show="flag" src="../img/on.png" alt="" width="200px" height="200px"><img v-if="flag" src="../img/on.png" alt="" width="200px" height="200px"><button @click="btn">显示|隐藏</button></div>
<script>new Vue({el: "#app",data: {flag: true},methods: {btn() {//this指向vue对象this.flag = !this.flag}}})</script>
3.v-on和@事件名触发事件
click: 点击一次; 当鼠标点击，触发事件dblclick: 双击；当鼠标双击，触发事件focus: 获取焦点； 当得到了光标，触发事件blur: 失去焦点; 当失去了光标，触发事件mouseover:鼠标移至； 鼠标移至某标签上方，触发事件 monseentermouserout:鼠标移出； 鼠标移出某标签上方，触发事件keyup:键盘按下； 键盘按下，触发事件 input 内容发生改变
<div id="app"><button @click="sub">-</button>//插值表达式{{num}}<button @click="add">+</button></div><script>new Vue({// 获取页面元素,#app选择器el: "#app",data: {num: 30},methods: {add() {// this指当前的Vue对象this.num++},sub() {this.num--}},})</script>
4.v-bind设置元素属性
<!--点击图片更换图片,类似开关操作-->
<div id="app"><!-- v-bind:src="imgSrc"可省略 不写 v-bind --><!-- 点击图片触发事件change --><img :src="imgSrc" @click="change" alt="" width="200px" height="200px"></div>
<script>new Vue({el: "#app",data: {imgSrc: "../img/on.png"},methods: {change() {//点击触发事件if (this.imgSrc == "../img/on.png") {this.imgSrc = "../img/off.png"} else {this.imgSrc = "../img/on.png"}}}})</script>
5.created页面加载运行的代码块
页面加载就执行的代码块置于created()方法内
// 页面加载时执行,每隔1s执行一次sub()created() {//每隔1s执行一次sub()方法//传递函数名（而不是函数调用）给另一个函数时,方法名后去掉()setInterval(this.sub, 1000)}
6.v-for
7.v-model双向绑定
输入框输入数据的同时插值表达式同时赋相同值
<body><div id="app"><form><!--输入框输入数据的同时插值表达式同时赋值--><p>用户名:<input type="text" v-model="username">{{username}}</p><p>帐户:<input type="text" v-model="account"></p><p>密码:<input type="password" v-model="password"></p><p>电话:<input type="tel" v-model="phone"></p><p>邮箱:<input type="email" v-model="email"></p><p>性别:<label for="man"><input type="radio" name="sex" id="man" value="m" v-model="sex">男</label><label for="wm"><input type="radio" name="sex" id="wm" value="f" v-model="sex">女</label>{{sex}}</p><p>年龄:<input type="text" v-model="age"></p><p>创建日期:<input type="datetime" v-model="date"></p><input type="button" value="提交" @click="commit"></form></div><script>new Vue({el: "#app",data: {username: "",account: "",password: "",phone: "",email: "",sex: "",age: "",date: ""},methods: {commit() {console.log(`${this.username},${this.account},${this.password},${this.phone},${this.email},${this.sex},${this.age},${this.date}`);}},created() {}})</script>
</body>
mmit() {
console.log(${this.username},${this.account},${this.password},${this.phone},${this.email},${this.sex},${this.age},${this.date});
}
},
created() {
}})
</script>