>  기사  >  웹 프론트엔드  >  Vue의 지침과 보간법에 대해 이야기하는 기사

Vue의 지침과 보간법에 대해 이야기하는 기사

青灯夜游
青灯夜游원래의
2022-11-02 20:12:281326검색

Vue의 지침과 보간법에 대해 이야기하는 기사

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。(学习视频分享:vue视频教程

一、安装vue

直接使用script标签引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

二、Vue模板案例

步骤

1、引入vue框架
2、定义1个盒子(根节点)
3、定义1个script标签

3.1、定义js对象(根组件)
3.2、通过vue创建1个应用
3.3、将应用挂载到根节点(第二步中创建的盒子)

data():存放页面中显示数据的地方



	
		
		
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

	
	
		
		

{{title}}

{{name}}

<script> //3.1、定义js对象(根组件) const obj={ //data():存放页面中存放数据的地方 data(){ return{ title:&#39;kobe&#39;, name:&#39;cc&#39; } } } //3.2、通过vue创建1个应用 const app=Vue.createApp(obj) //3.3、将应用挂载到根节点(第二步中创建的盒子) app.mount(&#39;#app&#39;) </script>

三、基础模板(记住)



	
		
		
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	
		
		
<script> Vue.createApp({ data(){ return{ } } }).mount(&#39;#app&#39;) </script>

四、vue的指令和插值

1、{{}}:插值表达式的语法

{{}}:可以在html中引用data中定义的数据
<h1>{<!-- -->{name}}</h1>

2、v-text:填充纯文本内容(data中的值)

效果和innerText一样
<h1 v-text="'name'"></h1>

3、v-html:填充html(data中的值)

效果和innerHtml一样
<div v-html="'desc'"></div>

4、v-pre:填充原始数据

防止vue对标签进行渲染(标签中写的什么,就显示什么)
<div v-pre>显示两个花括号,中间为js:{{}}</div>



	
		
		
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	
		
		

{{name}}

{{age}}

{{sex}}

info中的a1:{info.a1}

info中的a2:{info.a2}


<div v-pre>显示两个花括号,中间为js:{{}}</div>
<script> //obj是vue的组件对象 const obj={ //data方法(返回的是vue组件对象的属性)——》页面上要显示的数据全部放到这里 data(){ return{ name:&#39;2022&#39;, age:18, sex:&#39;男&#39;, info:{ a1:&#39;66&#39;, a2:&#39;88&#39; }, desc:&#39;<h1>js</h1>&#39;, arr:[8,24,23,24,25,66] } } } //3.2、通过vue创建1个应用 const app=Vue.createApp(obj) //3.3、将应用挂载到根节点(第二步中创建的盒子) app.mount(&#39;#app&#39;) </script>

效果展示:

Vue의 지침과 보간법에 대해 이야기하는 기사

5、v-bind:属性绑定

语法:
v-bind:属性=‘值’
简写 :属性=‘值’

<a v-bind:href="aInfo.addr">{<!-- -->{aInfo.title}}</a>
简写
<a :href="aInfo.addr">{<!-- -->{aInfo.title}}</a>



	
		
		
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	
		
		
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						aInfo:{
							title:&#39;百度&#39;,
							addr:&#39;http://www.baidu.com&#39;
						}
					}
				}
			}).mount(&#39;#app&#39;)
			
	
		</script>
		
	

样式绑定

nbsp;html>

	
		<meta>
		<title></title>
		<!--1、引入vue框架-->
		<script></script>
	
		<style>
			.js{
				width:200px;
				height:200px;
				background: red;
			}
		</style>
	
	
		
		<div>
			<!--样式绑定:class属性绑定-->
			<div>js</div>
		</div>
		<hr>
			<!--样式绑定 style属性-->
		<div>py</div>

		<script>
			
			Vue.createApp({
				data(){
					return{
						isjs:false,
						s1:{
							width:&#39;300px&#39;,
							height:&#39;200px&#39;,
							background:&#39;red&#39;,
						}
						
					}
				}
			}).mount(&#39;#app&#39;)
			
	
		</script>
		
	

6、v-on:事件绑定

语法:v-on:事件名称=‘执行的方法’
简写
@事件名=‘执行的方法’

<button v-on:click="'switchShow'">切换显示</button>
简写
<button>切换显示</button>

7、v-show:控制元素显示和隐藏的指令

控制元素显示隐藏的指令:
v-show 值为True则显示,值为false为隐藏

<div v-show="'status'" :style="{width:'200px',height:'200px',background:'red'}">py</div>

methods:定义页面操作过程中调用的函数(vue组件的方法)
注意点:不要直接把方法定义为箭头函数

例如

switchShow()
定义页面操作过程中调用的函数(vue组件的方法)
注意点:不要直接把方法定义为箭头函数



	
		
		
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	
		
		
py
<script> Vue.createApp({ //定义页面上显示数据的(组件的属性) data(){ return{ status:true } }, //定义页面操作过程中调用的函数(vue组件的方法) //注意点:不要直接把方法定义为箭头函数 methods:{ switchShow(){ //在方法中可以通过this获取组件中的数据 //方法中的this代表组件中的对象 this.status=!this.status } } }).mount(&#39;#app&#39;) </script>

8、v-model:数据的双向绑定

双向绑定只用于表单和组件
页面修改数据会变,数据改变,页面也会改



	
		
		
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
		
		
		
		
		
		
账号:
密码:
<script> Vue.createApp({ data(){ return{ user:"root", pwd:123456 } }, methods:{ login(){ //发送请求到后端, console.log(&#39;提交了登录&#39;) console.log(this.user,this.pwd) } } }).mount(&#39;#app&#39;) </script>

9、v-if、v-else-if、v-else:条件渲染

通过条件来控制元素是否渲染到页面

v-if
v-else-if
v-else



	
		
		
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	

		

{{item}}

{{item}}

{{item}}

<script> Vue.createApp({ data(){ return{ item:{ case_id:1, title:&#39;用例1&#39;, result:"success" }, } } }).mount(&#39;#app&#39;) </script>

10、v-for:遍历对象、数组

案例:根据不同的结果,展示不同文字颜色



	
		
		
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	
		
		
id title result 操作
{{item.id}} {{item.title}} {{item.result}} {{item.result}} {{item.result}} {{item.result}}
<script> Vue.createApp({ data(){ return{ cases:[ { case_id:1, title:&#39;用例1&#39;, result:"success" }, { case_id:2, title:&#39;用例2&#39;, result:"fail" }, { case_id:3, title:&#39;用例3&#39;, result:"error" }, { case_id:4, title:&#39;用例4&#39;, result:"success" }, ] } } }).mount(&#39;#app&#39;) </script>

Vue의 지침과 보간법에 대해 이야기하는 기사

(学习视频分享:web前端开发编程基础视频

위 내용은 Vue의 지침과 보간법에 대해 이야기하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.