Vue.js 绑定容器

最新推荐文章于 2024-11-13 11:52:56 发布

poop-io

最新推荐文章于 2024-11-13 11:52:56 发布

阅读量540

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yang_72/article/details/136533841

版权

创建容器绑定id值

在body中创建容器

	如：
	<div id="app">
        {{message}}
    </div>

{{ massage }} 两个大括号{{ }}为插值

创建一个新的实例化Vue

 	
 	var app = new Vue({

        el:"#app",
        data:{
            message:"Hello Word"
        }
    })

el绑定创建的容器：
el:"容器名称，如id或class等"

data用于定义变量的集合,通常与插值提供
注：不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式

 
 data 两种样式：
 
	1.对象式
		data:{
		
				}
	2.函数式
		data(){
			return{
		
				}
			}

{{message}} 这里的massage可修改

阻止🚫启动提示

在开头使用：
Vue.config.productionTip = false;

vue启动时出现的提示，阻止启动提示

指令

绑定元素的属性，在标签内添加 v-bind:
<a v-bind:href="num">访问vue官网</a>

绑定事件

v-on: 或 @
v-on:事件类型事件类型一定不要加on

methods 存放函数

存放函数方法
注：尽量不要使用箭头函数，否则拿取不到data的数据
注：函数名称不要与变量名称一致

	methods: {
            btns(user){
                if(user==1){
                    this.cla = "box1";
                }else{
                    this.cla = "box2";
                }
           }

方法	作用
v-for=	遍历数组，对象，字符串，指定次数。在vue2中，v-for优先级比v-if高，在vue3中，v-if优先级比v-for高。 v-if和v-for不能同时使用
v-bind: 或写成 :（冒号）	绑定元素的属性
vue-cli	搭建脚手架
v-if	做判断，隐藏(是否存在)。与v-show的区别：对于元素只是一次可以选择使用v-if(消耗内存),操作次数多v-show(并没有销毁元素) 。 v-if和v-for不能同时使用
v-show	隐藏(是否展示) 默认隐藏
v-else和v-else-if	判断
v-text和v-html	插值，都会覆盖文本

v-if / v-show
作用：做判断，隐藏(是否存在)

区别：
对于元素只是一次可以选择使用v-if(消耗内存),操作次数多v-show(并没有销毁元素)
1、在vue2中，v-for优先级比v-if高，在vue3，v-if优先级比v-for高
2、v-if和v-for不能同时使用
3、同时使用需要在外层嵌套盒子，在外层进行v-if判断，在内层进行v-for循环