vue（2）

2021-09-10 09:02:40 作者：互联网

v-指令集
概念： html标签中带有 v- 前缀的特殊属性
一、v-model（双向绑定）：
双向绑定即M变化的同时，V也变化，反之亦然。
二、v-html：
解析M中的HTML标签语句
三、v-cloak（闪现）：
F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，产生插值表达式加载时闪烁<style>[v-cloak]{display: none;}</style> <div id="app" v-cloak></div>
注：一对[]括起来的是属性选择器
四、v-if（判断）：
根据表达式的值( true 或 false )来决定是否插入，
注：
1.可以跟v-else-if和v-else联用，其中v-else后不加属性值
2.三者顺序应该合理
五、v-for（循环）：
通过遍历数组的数据来渲染一个项目列表
1.o in 数组：返回对应的元素o
2.o,i in 数组：返回对应的元素o,下标i
3.(o,i) in 数组：返回对应的元素o,下标i
六、v-show（显示）：
满足条件则显示，不满足则不显示，利用css控制不满足的话设置display: none;，和v-if不一样，v-show只是不显示而已
七、v-on（事件）：
用于调用vue中的方法
八、v-bind（跳转）：
当属性的值是变量而不是字符串时，通过标识，vue会自动处理，全称: v-bind:href，简称： :href

<body>
		<div id="demo">
			<p>{{adr}}</p>
			<!-- 解析HTML -->
			<p v-html="adr">{{adr}}</p>		
			<!-- 双向绑定 -->
			<input type="text" v-model="adr"/>
			<!-- 判断 -->
			<p v-if="person.age<18">未成年</p>
			<p v-else-if="person.age>=18 && person.age<50">壮年</p>
			<p v-else>中老年</p>
			<!-- for循环 -->
			<p v-for="o in array">{{o}}</p>
			<p v-for="o,i in array">下标{{i}}处对应的数据是：{{o}}</p>
			<!-- on事件 -->
			<input type="button" v-on:click="eat()" value="开吃"/>
			<button v-on:click="i++">点赞:{{i}}</button><br />
			<!-- bind跳转 -->
			<a v-bind:href="url">{{name}}</a>
			<a :href="url">{{name}}</a>
		</div>
		<script>
			new Vue({
				el:"#demo",
				data:{
					adr:"<p>四川泸州</p>",
					i:1000,
					url:"http://www.baidu.com",
					name:"百度",
					person:{
						age:48		
					},
					array:[1,"zzq","zmm",true]
				},
				methods:{
					eat(){
						console.log("正在大口吃肉");
					}
				}
			})
		</script>
	</body>

组件
全局组件语法格式：Vue.component(tagName,options),使用后可以通过tagName标签来调用组件，类似与html标签的扩展
注：先绑定组件，再注册对象

<body>
		<div id="app">
			<sharbee></sharbee>
			<!-- 局部组件的使用 -->
			<animal></animal>
		</div>
		<!-- 全局组件的使用 -->
		<div id="ppa">
			<sharbee></sharbee>
		</div>
		<script>
			// 全局组件
			Vue.component("sharbee",{
				template:"<img src='../img/1.webp'>",
			})
			new Vue({
				el:"#app",
				// 局部组件
				components:{
					animal:{
						template:"<p>zhoumm</p>"
					}
				}
			})
			new Vue({
				el:"#ppa"
			})
		</script>
	</body>

构建vue项目
lifecycle+npm+webpack
lifecycle生命周期： 可分为3个阶段，共8个钩子：初始化（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/后）
npm（nodejs包管理器）： 通过npm命令下载资源
webpack（前端自动化构建工具）： 基于nodejs实现自动构建vue项目
vue-cli脚手架
用于自动生成vue.js+webpack的项目模板

标签：vue,adr,name,标签,Vue,组件
来源： https://blog.csdn.net/ZziQon/article/details/120196528