vue一周小结

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

头秃患者77

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

阅读量448

点赞数 12

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/pig_pig7/article/details/136605676

版权

一.Hello word

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>





<div id="app">



{{ message }}---

<h1>

{{names}}

</h1>

</div>

<div id="abc" class="box1">

{{ message }}

</div>

</body>

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

<script>

// 阻止VUE在启动时产生的提示

Vue.config.productionTip = false;

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!',

names:"张三"

}

})

var aaa = new Vue({

// el绑定容器

el: '.box1',

data: {

message: '计应1班第一天上vue'

}

})

</script>

</html>

二.v-bind指令

v-bind:动态绑定属性

<div id="ips">

{{userName}}

<div>

<a v-bind:href="abc" v-bind:class="a">vue方法访问vue官网</a>

</div>

</div>

三.如何清除启动时产生的提示

Vue.config.productionTip = false;

四. data

var vm = new Vue({

// data中装的是定义的变量，跟插值对应

// 1.data:{}对象式

// 2.data(){return{}}函数式,注：搭建脚手架（vue-cli）后,一定要使用函数式

// 注：不可以使用箭头函数

// data:{

// userName:"李四",

// a:""

// },

// data:function(){

// return{

// userName:"赵六"

// }

// },

data() {

return {

userName:"王五",

abc:"https://v2.cn.vuejs.org/v2/guide/syntax.html",

a:"box1"

}

},

})

五. 绑定容器的2种方式

1.el绑定:"容器id或class等"

2.Vue实例.$mount("容器id或class等"),注：一定写在最后

创建vue实例:

<script>

var app = new Vue({

el:"#app",

data:{

a:"我是张三",

b:"我今年18岁",

c:10,

d:20,

e:[1,2,3],

f:[4,5,6],

g(x){

return x;

}

}

})

</script>

六. 绑定元素名称使用v-bind:属性名 == :属性名 --

<a v-bind:href="http">访问链接</a>

<a :href="https">访问链接</a>

七. 绑定事件

v-on:事件 == @事件

注：事件名称一定不要加on

<button v-on:click="func1(1)">点击1</button>

<button @click="func1(2)">点击2</button>

<h1 :class="sty">我现在点击的是{{num}}</h1>

<h1 :style="boss[0]">绑定样式style</h1>

八. methods处理的函数方法

methods: {

func(){

console.log(1111111);

return 1111111;

},

func1:function(user){

if(user==1){

this.num = 1;

this.sty = "box1";

console.log(222222222);

}else {

this.num = 2;

this.sty = "box2"

console.log(333333333);

}

},

func2(){

this.num = 2;

this.sty = "box2"

console.log(333333333);

}

},

})

vm.$mount("#app");

九.v-for

v-for用于遍历数组，对象，字符串，指定次数

注：:key="需要唯一"

<h1 v-for="(item,index) of arr" :key="index+item">

{{item}}---{{index}}

</h1>

<hr>

<h1 v-for="(item,index) of objs" :key="index">

{{item}}--------{{index}}

</h1>

<hr>

<h1 v-for="(item,index) of arrs" :key="item.sclNum">



{{item}}-----{{item.userName}}-------{{item.age}}-----{{index}}

</h1>

<h1 v-for="(item,index) of str" :key="index+item">

{{item}}

</h1>

<h1 v-for="(item,index) of 5" :key="item">

{{item}}

</h1>

</hr>

十. v-cloak

v-cloak 解决网速慢展示插值|页面出现闪烁或白屏，

使用需要给标签添加v-cloak,还需要添加上面代码

<style>

[v-cloak]{

display: none;

}

</style>

十一. v-if和v-show区别

1.相同的：都可以进行显示隐藏

2.不同点：v-if存在或不存在，v-show展示或不展示

3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗

多次的显示隐藏推荐使用v-show

v-if和v-for优先级和使用事项

在vue2中v-for比v-if优先级高

在vue3中v-if比v-for优先级高

v-if和v-for在vue2或vue3中都不要同时使用，

如果需要使用在外层先使用判断，在进行循环 -

十二. v-text和v-html，插值区别

1.相同点：v-text和v-html都会覆盖原本内容

2.不同点：v-text文本，v-html标签

插值会进行拼接

注：一定不要在用户提交时使用v-html

1.v-else，v-else-if不能单独使用，要跟if一起使用

2.v-else,v-cloak,v-once，v-pre不需要带值

3. v-once只加载一次，静态内容，因为不会修改值所以优化了性能

4.v-pre可以跳过插值或指令不加载

5. v-bind:单向数据绑定,由data流行页面

v-model双向数据绑定，由data流向页面或页面(用户输入)流向data

头秃患者77

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
vue一周小结

-- 容器，app容器名称-->-- 注：容器名称尽量使用id绑定唯一值 -->-- {{}}插值语法 --><h1>{{names}}</h1></div></div>// 阻止VUE在启动时产生的提示data: {',names:"张三"})// el绑定容器data: {message: '计应1班第一天上vue'})
复制链接

扫一扫