VUE 02

最新推荐文章于 2021-11-26 09:45:48 发布

子非鱼emma

最新推荐文章于 2021-11-26 09:45:48 发布

阅读量156

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_38998319/article/details/117427436

版权

VUE 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.JS与vue的双向数据绑定

<body>

<h2>js完成双向数据绑定</h2>	
<div id='app1'>
	<input type="text" id='input' name="">
	<p id='p1'></p>
	<p id='p2'></p>
</div> 







<h2>使用vue完成双向数据绑定</h2>
 <div id="app">
	<input type="text" name='' v-model='inputVal'>
	<h4>{{inputVal}}</h4>
</div>
</body>
<script type="text/javascript">


//============================================ js实现双向数据绑定：
// 实时的获取input中输入的数据 使用oninput事件：当输入数据的时候触发
let input=document.getElementById('input')
let p1=document.getElementById('p1')
let p2=document.getElementById('p2')

// 给输入框绑定oninput事件
input.oninput=function(){
	let inval=input.value;
	p1.innerHTML=inval;
	p2.innerHTML=inval;
}  

// ==============================================vue实现双向数据绑定
//  使用vue中的一个指令：v-model 双向数据绑定 v-mode写在input中的
//  vue中有很多 指令 指令都是写在标签中的

new Vue({
	el:'#app',
	data:{
		inputVal:''
	}
})
</script>

文本框输入什么小米的元素就显示什么

2.m v vm 原理

<script type="text/javascript">

// vue中的模式：M V  VM和mvc原理差不多
// 1.view层  v
// 	视图层，就是在前端中我们是的dom层，主要的作用是用于给用户展示各种信息
// 2.model层 m ->data:{}
// 	数据层，数据可以是我们自己定义的数据，或者是从网络上请求回来的数据
// 3.viewmodel层  vm m v vm 
// 	视图模型层,v和m层的沟通桥梁，一方面实现了数据源绑定，将model的改变实时的响应
// 	到view层，另一方面实现了dom的监听，dom发生改变可以对应改变数据





</script>

3.VUE插值语法

<body>
	<div id='app'>
		<!-- 在{{}} 中写data中的数据 -->
		<p>{{a}}</p>
		<!-- {{}}里边可以使用算数运算符 -->
		<p>{{b+5}}</p>
		<p>b+5={{b+5}}</p>
		<!-- {{}}中可以使用三元运算符 -->
		<p>{{c==1?'男':'女'}}</p>
       {{bool?'真':'假'}}
	</div>
</body>
<script>
new Vue({
	el:'#app',
	data:{
		a:'abc',
		b:13,
		c:0,
        bool:true
	}
})
</script>

4.v-pre 和 =v-html 和v-text

body>
	<div id='app'>
		<!-- ===================================	v-pre 指令 原样输出 -->
		<!-- 当前使用该指令的元素及所有子元素都会应用于该指令 -->


		<p>{{a}}</p>
		<p v-pre>
			{{b}}{{str}}
			<span>{{abc}}</span>
		</p>


		<!-- 
            {{}}如果渲染的数据是标签(超链接),默认是不解析的为了防止XSS攻击 

             XSS攻击:通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页
        -->

		<!-- =================================v-html 可以解析html代码 -->
		<!-- 
		语法格式： 
		<元素 v-html='vue中data中的数据'></元素>
		 -->

		<p>{{b}}</p>
		<!--<a href="http://www.baidu.com">百度</a>-->
		<p v-html='b'>{{b}}</p>
		<!--百度（一个超链接）-->
		<p v-html="c"></p>

		<!-- 文本插值指令 =========================v-text 等价于{{}} -->
		<p>{{a}}</p>
		<p v-text="a">{{b}}</p>

		<!-- 渲染的时候先渲染{{}}中的b 再去执行v-text指令，会替换{{}}中渲染的数据 -->





	</div>
</body>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			a: 'a变量',
			b: '<a href="http://www.baidu.com">百度</a>',
			c: '<h1>我是一级标签</h1>'
		}
	})
</script>

5.vue中的斗篷 v-cloak

<head>
	<title>vue中的斗篷 v-cloak</title>
	<meta charset="utf-8">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<style type="text/css">
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
<!-- 
	斗篷：cloak 美[kloʊk]
		1.定义一个css样式表
			语法格式：
				[v-cloak]{属性:属性值;display:none;}

		2.指令:v-cloak 特点:当vue框架加载完成后，自动清除css样式表中的属性
			指令的语法格式:
				<元素 v-cloak></元素>

		定义：
		由于网络原因，导致vue框架文件没有及时的加载进来，如果vue没有加载进来，
		{{}}中的语法会没解析，{{name}},等在vue.js文件加载完成后，在出现渲染
 -->
	<div id='app'>
		<p v-cloak>{{name}}</p>
		<p>hahaha</p>
	</div>




</body>
<!-- 将来我们在工作的时候,引入外部的js文件,一般写在下边,因为代码是自上向下指定,如果网络不给力,会影响页面的渲染 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
new Vue({
	el:'#app',
	data:{
		name:'hahaha'
	}
})
</script>

6.v-if 和v-show

<body>
	<div id="app">
<!-- 		
	v-if
	用于狂战元素的显示或隐藏，v-if的指令值是布尔类型
	如果值为true表示显示 如果只为false 删除该节点

	v-show
	用于控制元素的显示或隐藏，v-show的指令值是布尔类型
	如果值为true表示显示  如果只为false表示不显示(display:none)

 -->

 <p v-if='true'>v-if='ture'{{name}}</p>
 <p v-if='bool'>v-if='bool'{{name}}</p>
 <p v-if='num==1'>v-if='num==1'{{name}}</p>



 <p v-show='false'>v-show='false'{{name2}}</p>
 <p v-show='bool'> v-show='bool'{{name2}}</p>
 <p v-show='num==2'>v-show='num==2'{{name2}}</p>


<!-- 
 v-if和v-show的区别：
    v-if 会在值为false的时候，删除指定的节点
	v-show 是在元素中添加一个display:none的属性，让元素隐藏

使用时机：
	  如果频繁的对元素进行显示或不显示操作，就是用v-show
	  如果少量的不显示指定元素，就使用v-if

 -->
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			name:'小花花',
			name2:'小绵绵',
			bool:false,
			num:2
		}
	})
</script>

7.事件绑定 v-on

<div id='app'>
<!-- 
	通过按钮 控制元素的显示或隐藏

	vue中事件的绑定：
	    v-on指令
		语法格式：
		 	v-on:事件名称='对应的方法'
			 简写为：
			 @事件名称=方法  推荐使用
	 -->
	 
	 <button v-on:click='fun()'>点击隐藏</button> <!--点击后将p标签隐藏了 -->
	 <button @click='fun1()'>点击我</button><!--点击后弹出alert -->
	 <p v-if='bool'>{{name}}</p>

</div>
</body>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			name: '小翠翠',
			bool: true
		},
		// vue中定义方法的方式
		methods: {
/* 			
			方法名: function () {

			}
 */
			fun: function () {
				// 获取当前对象中data中的值 this
				// let name = this.name;
				// console.log(name);
				this.bool = false;
			},
			fun1:function(){
				alert('我被执行了')
			}
		}

	})
</script>

8.vue选项卡案例

<body>
 <div id='app'>
	 <button @click='fun(1)'>娱乐新闻</button>
	 <button @click='fun(2)'>八卦新闻</button>
	 <button @click='fun(3)'>体育新闻</button>

	 <p v-show='num==1'>我是娱乐新闻的信息</p>
	 <p v-show='num==2'>我是八卦新闻的信息</p>
	 <p v-show='num==3'>我是体育新闻的信息</p>
 </div>
</body>
<script type="text/javascript">
new Vue({
	el:'#app',
	data:{
		num:1
	},
	methods:{
		fun:function(num){
			console.log(num);
			this.num=num;
		}
	}
})
</script>

9.VUE函数的调用

<body>
	<div id="app">
		{{fun(18)}}<!-- 结果为：20 -->
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			name:'admin'
		},
		methods:{
			fun:function(age){
				console.log('我是fun函数被调用了');
				return this.fun2(age)
			},
			fun2:function(age){
				console.log('我是fun2函数被调用了');
				return age+2;
			}
		}
	})
</script>

10. 标签属性支持vue --- v-bind

<body>
	<div></div>
	<div id="app">
<!-- 

		 绑定属性：v-bind 指令:可以让属性支持vue语法
		     简写为:
			 :属性

 -->
			 <a v-bind:href="aHref">百度</a>
			 <a :href="aHref2">淘宝</a>
			 <img :src="img" alt="">

			 <button @click='bian()'>{{str2}}</button>
			 <!-- 点击按钮调用bian() 根据条件修改str2和str的值 -->
			<a :href="num==true?aHref:aHref2">{{str}}</a>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			aHref: 'http://www.baidu.com',
			aHref2: 'http://www.taobao.com',
			img: 'https://img1.baidu.com/it/u=920361034,2356219527&fm=26&fmt=auto&gp=0.jpg',
			num: true,
			str: '百度',
			str2:'变淘宝'

		},
		methods: {
			bian: function () {
				// 每嗲用一次给num取反
				this.num =!this.num ;
				if(this.num==true){
					this.str='百度'
					this.str2='变淘宝'
				}else{
					this.str='淘宝'
					this.str2='变百度'
				}
				
			}
		}
	})
</script>

子非鱼emma

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
VUE 02

1.JS与vue的双向数据绑定<body><h2>js完成双向数据绑定</h2> <div id='app1'> <input type="text" id='input' name=""> <p id='p1'></p> <p id='p2'></p></div> <h2>使用vue完成双向数据绑定</h2> <div
复制链接

扫一扫