vue基础总结

最新推荐文章于 2023-04-12 21:16:53 发布

好菜的程序媛

最新推荐文章于 2023-04-12 21:16:53 发布

阅读量144

点赞数

分类专栏： vue 文章标签： vue tab 基础语法

本文链接：https://blog.csdn.net/Gomeer/article/details/84954514

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

vuejs的核心是一个允许使用简洁的模板语法声明式的将数据渲染进dom元素的系统

1.基础构建

<div id="app"></div> //相当于模板
<script type="text/javascript" src="js/vue.js" ></script> //vuejs引入
//声明数据
<script>
	var vm= new Vue({
		el:"#app" 	//挂载点
		,data:{
			msg:"<h1>hello world!</h1>",
			b:"",	//对于某些属性晚些时候才使用的话，可以先设置初始值
			title:"我是title"
		}
	})
</script>

2.使用简洁的语法将数据渲染进模板
{{ }} //文本插值
v-html 将值作为html的形式插入当前dom元素
v-text 将值作为文本的形式插入当前dom元素
v-bind:属性名=“值中可以有data数据对象的属性”
v-once 只绑定一次数据

<div id="app">
	{{msg}}
	<div v-text="msg"></div>
	<div v-html="msg"></div>
	<div title="title1">title</div>
  	<div v-bind:title="title">title</div>
</div>

3.条件绑定和循环绑定
v-if、v-else、v-show

指的是当满足if条件时才显示标签，后续不会再显示此标签
v-if和v-else之间不能有其他标签

v-if 时，不仅是不显示，而且dom不存在，而v-show时，是隐藏，看不见但dom存在

<div id="app">
	<p v-if="active">true</p>
	<p v-else>false</p>			
	<p v-show="active">active</p>        
</div>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			active:true		
		}
	})
</script>

4.数组、对象的渲染
数组： v-for="(item,index) in arr"
对象：v-for="(item,key,index) in obj"

<body>
	<div id="app">
        <ul>
            <!-- 遍历数组 -->          
            <li v-for="item in arr">{{item}}</li>   	
            <li v-for="(item,index) in arr">{{index}}----{{item}}</li> 
            
            <!-- 遍历对象 -->
            <li v-for="item in obj">{{item}}</li>
            <li v-for="(value,key,index) in obj" >{{value}}==={{key}}==={{index}}</li> 
        </ul>	
   </div>
    <script type="text/javascript" src="js/vue.js" ></script> 
    <script>
    	var vm = new Vue({
            el:"#app",
            data:{
                arr:["data1","data2","data3","data4"],
                obj: {
                    name: '张三',
                    age: 80,
                    sex: '男'
               }
            }
        })
    </script>
</body>

5.数组对象更新检测

更改数组
1.使用能够改变数组本身的方法才操作数据 push pop shift unshift splice sort reverse
经常使用splice，功能比较强大，可以增加，删除，修改vm.arr.splice(startindex,length,newValue);
2.vm.$set(vm.arr,index,newValue)
3.Vue.set(vm.arr,index,newValue)

更改对象
错误写法 vm.obj.属性名=“值”
正确写法 1.vm.$set(vm.obj,key,newValue)
2.Vue.set(vm.obj,key,newValue)

6.双向数据绑定
双向数据绑定 v-model 只能加给表单元素

<body>
    <div id="app">
        <input type="text" v-model="uname" />
        <span>{{uname}}</span>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                uname:"11"
            }
        })
    </script>
</body>

7.绑定事件
在methods中添加函数函数名（）

 methods:{	               
     outerclick(){
         alert("outer")
     }
 }

在需要绑定的对象上添加 @绑定事件名称=“函数名”

<span @click="outerclick">span</span>

阻止冒泡 @绑定事件名称.stop=“函数名”
阻止浏览器默认行为 @绑定事件名称.prevent=“函数名”

<body>
	<div id="app">
		<div @click="outerclick">div
			<span @click.stop="msg">span</span>
		</div>
	</div>
	<script src="vue.js"></script>
	<script>        
      	 	var vm = new Vue({
            el: "#app",
            data: {
                uname: "ccc"
            },
            methods:{	               
                msg(){
                    alert(this.uname)  // 在方法内部使用this可以直接访问到数据对象的数据
                },
                outerclick(){
                    alert("outer")
                }
            }
        })
   </script>
</body>

8.结合实践，用vue写tab切换例子

<body>
	<div id="app">
		<ul>
			<li v-for="(item,index) in tabs" @click="tab(index)">{{item}}</li>
		</ul>
		<div class="tabCon">
         	<div  v-for='(itemCon,index) in tabContents' v-show="index == num">
         		{{itemCon}}
         	</div>
    		</div>
	</div>
	<script src="js/vue.js"></script>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				tabs:["tab1","tab2","tab3","tab4"],
				tabContents: ["内容一", "内容二","内容三","内容四"],
				num:0
			},
			methods:{
				tab(index){
					this.num=index;
				}
			}
		})
	</script>		
</body>

好菜的程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础总结

vuejs的核心是一个允许使用简洁的模板语法声明式的将数据渲染进dom元素的系统1.基础构建&lt;div id="app"&gt;&lt;/div&gt; //相当于模板&lt;script type="text/javascript" src="js/vue.js" &gt;&lt;/script&gt; //vuejs引入//声明数据&lt;script&amp
复制链接

扫一扫

专栏目录