Vue插值语法
<div class="app">
<p>{{ age }}</p>
<p>{{ age+10 }}</p>
<p>{{ age >= 19 }}</p>
<!-- 三元表达式 -->
<p>{{ age <= 18 ?'未成年':'成年'}}</p>
<!-- <p>{{ if(age>=18){} }}</p> -->
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:".app",
data:{
age:16
}
})
v-model用法
负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理 表单专用,是一种双向绑定
<div id="app">
<!-- type表示类型为文本类型 -->
<input type="text" v-model="msg">
<!-- 下拉框 -->
<select v-model="fruit">
<option value="apple">苹果</option>
<option value="ora">橘子</option>
<option value="ba">香蕉</option>
</select>
<!-- 单选框 -->
<input type="checkbox" v-model="che">
</div>
<script src="./vue.js"></script>
<script>
new Vue ({
el:'#app',
data:{
msg:'',
fruit:'',
che:'true',
}
})
v-on用法
点击事件:v-on 同时,v-on可以用@简写替代
<button v-on:dblclick="fn2">双击李易峰</button>
<!-- 简写 -->
<button @click="fn1">点我点我</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
fn1(){
alert('点我干嘛')
},
fn2(){
confirm('你是吴亦凡的朋友吗?')
prompt('请输入你的名字')
alert('准备好和我一起吃快餐了吗?')
}
}
})
v-bind用法
表单绑定:在标签中绑定 v-bind :(要绑定的属性,也可以自定义声明的变量)="(要绑定的属性值)" 动态绑定数据
<div id="app">
<!-- 作用:让行内属性不写死,可以变换 -->
<!-- 简写: v-bind == : -->
<!-- 除了标签内容需要动态绑定外,标签的属性也需要动态绑定 -->
<!-- 例如:a元素的href属性和img元素的src属性。这时就需要用到v-bind了 -->
<a href="http://www.baidu.com">跳转</a>
<a v-bind:href="url">这里跳转</a>
<!-- 本来‘这里跳转’跳转为淘宝页面,当点击‘点击这里转换为淘宝页面!’则会将网页转换为小米页面 -->
<button @click="change" target="_blank">点击这里转换为小米页面!</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
url:'http://taobao.com'
},
methods:{
change(){
this.url='http://xiaomi.com'
}
}
})
if else用法
标签内ok为布尔变量,如果ok为true则显示,为false,则不显示
<h1 v-if="ok">xxx</h1>
<h1 v-else>hhh</h1>
v-if 和 v-show用法
【v-show】
1.本质就是标签display设置为none,控制隐藏,只是基于css进行切换
2.v-show有更高的初始渲染消耗
3.v-show适合频繁切换的状况
【v-if】
1.动态的向DOM树内添加或者删除DMO元素
2.v-if有更高的切换消耗
3.v-if适合运行条件很少改变的状况
<div id="app">
<div v-show="display"> 我是v-show</div>
<div v-if="display">我是v-if</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
display:true
},
})
v-if 使用
<div id="app">
<h3>今天有多少钱</h3>
<!-- 多分支v-if -->
<div v-if="money >= 500"> 晚上吃火锅</div>
<div v-else-if="money >=100">晚上吃串串</div>
<div v-else-if="money >= 50">晚上加鸡腿</div>
<div else="吃泡面"></div>
<hr>
<!-- 双分支v-if -->
<div v-if="age >= 18">工地搬砖</div>
<div v-else-if="age <18">家里喝奶</div>
<div></div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
money:300,
age:15
}
})
v-for遍历数组
item是循环遍历时记录的值,index是循环时的下标,for的用法就是如此简单。
<li v-for="item in items">
{{item.message}}
</li>
<li v-for="(item,index) in items">
{{item.message}}
{{index}}
</li>
v-for遍历对象
语法:
渲染属性名和属性值:<标签 v-for="(value,key ) in 对象"></标签>
只渲染属性值:<标签 v-for="value in 对象"></标签>
<div id="app">
<li v-for="item in obj">{{item}}</li>
<li v-for="(item,key) in obj">{{item}} -- {{key}}</li>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
obj:{
name:'TOM',
age:20,
sex:"男"
},
}
})
v-for遍历数字
<div id="app">
<!-- num是1到9 -->
<li v-for="num in 99">{{num}}</li>
<!-- <li v-for="(item,key) in obj">{{item}} -- {{key}}</li> -->
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
}
})
vue存储方式
1.什么是localstorage:
在HTML5中,新加入了一个localStorage特性,这个特性主要用来作为本地存储来使用。
它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localStorage一般为5M。
2.localstorage的生命周期
LocalStorage生命周期是永久,这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永久存在。
3.localStorage的局限
a.在IE8以上的IE版本才支持localstorage这个属性。
b.目前所有的浏览器中都会被localStorage的值类型限定为string类型,//对我们日常比较常见的JSON对象类型需要一个转换。
vue计算属性
【计算属性】
- 可以在里面写一些计算逻辑的属性。
- 他不像普通函数那样直接返回结果,而是经过一系列计算之后再返回结果。
- 同时只要在它当中应用了data中的某个属性,当这个属性发生变化时,计算属性可以嗅探到这 种变化,并自动执行
- 定义:要用的属性不存在,通过已有属性计算得来。
- 使用:在computed对象中定义计算属性,在页面中使用{{方法名}}来显示计算的结果。
vue事件属性
JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性。
常见的有加载事件、鼠标事件。
【事件流】
由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流11 页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。
【js的事件流三阶段】
- 事件捕捉阶段(capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素:
- 处于目标阶段(target phrase):处于绑定事件的元素上;
- 事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;
- (事件捕获是从上到下,而事件冒泡,是从下到上。)
ajax
<script>
// 1、创建一个请求对象
let xhr = new XMLHttpRequest()
//2、 调用xhr的open方法,开启请求
// 传入请求方式和请求地址
xhr.open('get', 'https://autumnfish.cn/api/joke')
// 3、设置请求成功后的回调函数
xhr.onload = function () {
console.log(xhr.response);
}
// 4、调用send方法
xhr.send()
</script>
ajax中的get请求
<script>
document.querySelector('.wawa').onclick = function () {
// 1.创建一个对象
let xhr = new XMLHttpRequest()
//2、 调用xhr的open方法,开启请求
// 传入请求方式和请求地址
xhr.open('get', 'https://autumnfish.cn/api/joke')
// 3.设置请求成功后的回调函数
xhr.onload = function () {
// 这里设置请求成功后要做的事情
// 把返回的数据显示在div中
document.querySelector('.joke').innerHTML = xhr.response
}
// 调用这个对象的send方法
xhr.send()
}
</script>
ajax中的post请求
<!-- AJAX发送post请求
1.创建请求对象,实例化一个ajax对象
-->
<script>
// 1.创建请求对象,实例化一个ajax对
let xhr = new XMLHttpRequest();
// 2.调用open方法,设置请求方式和地址
xhr.open('post', 'https://autumnfish.cn/api/user/register')
//3. 设置请求头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//4. 注册回调函数
xhr.onload = function () {
console.log(xhr.responseText);
}
// 5.发送请求:参数格式''key' = 'vaule'
xhr.send('username= 江绍远的绍')
</script>