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() {