vue基本内容总结

最新推荐文章于 2024-10-26 20:20:07 发布

爱吃土豆的粉条

最新推荐文章于 2024-10-26 20:20:07 发布

阅读量105

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Jclam/article/details/129271062

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue插值语法

<div class="app">

<p>{{ age }}</p>

<p>{{ age+10 }}</p>

<p>{{ age >= 19 }}</p>



<p>{{ age <= 18 ?'未成年':'成年'}}</p>



</div>

<script src="./vue.js"></script>

<script>

new Vue({

el:".app",

data:{

age:16

}

})

v-model用法

负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理表单专用，是一种双向绑定

<div id="app">



<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">









<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>



<div v-if="money >= 500"> 晚上吃火锅</div>

<div v-else-if="money >=100">晚上吃串串</div>

<div v-else-if="money >= 50">晚上加鸡腿</div>

<div else="吃泡面"></div>

<hr>



<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">



<li v-for="num in 99">{{num}}</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请求

<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>