Heim  >  Artikel  >  Web-Frontend  >  Ein Artikel über Anweisungen und Interpolation in Vue

Ein Artikel über Anweisungen und Interpolation in Vue

青灯夜游
青灯夜游Original
2022-11-02 20:12:281328Durchsuche

Ein Artikel über Anweisungen und Interpolation in 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>

效果展示:

Ein Artikel über Anweisungen und Interpolation in 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>

Ein Artikel über Anweisungen und Interpolation in Vue

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

Das obige ist der detaillierte Inhalt vonEin Artikel über Anweisungen und Interpolation in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn