Vue.js基础入门知识

最新推荐文章于 2024-06-27 19:54:40 发布

argentian

最新推荐文章于 2024-06-27 19:54:40 发布

阅读量2k

点赞数 7

文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_33007465/article/details/114819500

版权

vue渲染

<div id="example">
<h2>{{value}} </h2>
</div>
<script type="text/javascript">
//通过new Vue() 来创建vue对象
var example= new Vue({
	el:"#example", //是element的缩写，给该id的div进行数据渲染
	data:{ //数据
	name:"Hello world！"
	}
})
</script>

双向绑定

<div id="example">
<input type="text" v-model="day">
<h2>
{{name}} ,
学习vue.js的第{{day}}天。
</h2>
</div>
<script type="text/javascript">
//通过new Vue() 来创建vue对象
var example= new Vue({
	el:"#example", //是element的缩写，给该id的div进行数据渲染
	data:{ //数据
	name:"Hello world！",
	day:1
	}
})
</script>

● 在代码中有一个 input 元素，通过 v-model 与 day进行绑定。同时通过 {{day}} 在页面中进行输出。
● input的value值变化，影响到了data中day的值，页面 {{day}} 与数据day绑定，因此day值发生变化，引起了页面效果的变化。

点击事件

<div id="example">
<button v-on:click="confirm">确定</button>
</div>
<script type="text/javascript">
var example= new Vue({
	el:"#example",
	data:{
	},
methods:{
	confirm:function(){
		console.log("点击确定成功！")
		}
	}
})
</script>

钩子函数

<div id="example">
{{hello}}
</div>
<script type="text/javascript">
var example= new Vue({
	el:"#example",
	data:{
		hello: '' // hello初始化为空
	},
	//created函数，代表vue实例这个时期的构造函数
	created(){
		this.hello = "hello, world！";
		//this 就是当前的Vue实例，在Vue对象内部，必须使用 this 才能访问到Vue中定义的data内属
		//性、方法等。
	}
})
</script>

v-text和v-html

使用v-text和v-html指令来替代 {{}}

● v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
● v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

<div id="example">
v-text:<span v-text="hello"></span> <br/> //hello, world！
v-html:<span v-html="hello"></span>      //带有<h1>属性的hello, world!
</div>
<script type="text/javascript">
var example= new Vue({
	el:"#example",
	data:{
		hello: '<h1>hello, world！</h1>' 
	},
})
</script>

v-model

v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
目前v-model的可使用元素有：
input
select
textarea
checkbox
radio
components (vue中自定义的组件)

<div id="example">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Python" />Python<br/>
<h1>
你选择了：{{language.join(',')}}
</h1>
</div>
<script type="text/javascript">
	var example= new Vue({
		el:"#example",
		data:{
			language: []
		}
	})
</script>

v-on

语法： v-on:事件名=“js片段或函数名”
简写： @事件名=“js片段或函数名”
例如： v-on:click='add’可以简写为@click=‘add’

<div id="example">
<!--事件中直接写js片段-->
<button @click="num++">增加</button><br/>
<!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
<button @click="less">减少</button><br/>
<h1>num: {{num}}</h1>
</div>
<script type="text/javascript">
	var example= new Vue({
		el:"#example",
		data:{
			num:1
		},
		methods:{
			less(){
				this.num--;
			}
		}
	})
</script>

v-for

1.遍历数组

语法： v-for=“item in items”
items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

<div id="example">
<ul>
	<li v-for="diff in difficulty">
		{{diff.name}} : {{diff.group}} : {{diff.score}}
	</li>
</ul>
</div>
<script type="text/javascript">
	var example= new Vue({
	el:"#example",
	data:{
		difficulty:[
			{name:'托马斯180接Aflay', group:'A', score: 1.0},
			{name:'分腿水平支撑', group:'B', score: 0.6},
			{name:'屈体720落俯撑', group:'C', score: 1.0},
			{name:'立转1080接垂地劈腿', group:'D', score: 0.9},
			{name:'双无支撑依柳辛接垂地劈腿', group:'D', score: 0.9}
		]
	}
})
</script>

2.数组角标
语法：v-for="(item,index) in items"
items：要迭代的数组。
item：迭代数组的别名
index：迭代到的当前元素索引，从0开始。

<div id="example">
<ul>
	<li v-for="diff in difficulty">
		{{index}} - {{diff.name}} : {{diff.group}} : {{diff.score}}
	</li>
</ul>
</div>

3.遍历对象
语法： v-for=“value in object” //对象的值
v-for="(value,key) in object" //（值，键）
v-for="(value,key,index) in object" //（值，键，索引(从0开始)）

<div id="example">
<ul>
	<li v-for="(value,key,index) in difficulty">
		{{index}} - {{key}} : {{value}}
	</li>
</ul>
</div>
<script type="text/javascript">
	var example= new Vue({
	el:"#example",
	data:{
		difficulty:{name:'托马斯180接Aflay', group:'A', score: 1.0},
	}
})
</script>

4.key
:key="" 可以读取vue中的属性，并赋值给key属性。

<ul>
<li v-for="(item,index) in items" :key="index"></li>
</ul>

v-if和v-show

1.基本使用
v-if=“布尔表达式” //当得到结果为true时，所在的元素才会被渲染。

<div id="example">
<!--事件中直接写js片段-->
<button v-on:click="show = !show">点击展示</button><br/>
	<h1 v-if="show">
		成功！
	</h1>
</div>
<script type="text/javascript">
var example= new Vue({
	el:"#example",
	data:{
		show:true
	}
})
</script>

2…与v-for结合
当v-if和v-for出现在一起时，v-for优先级更高。先遍历，再判断条件。

<div id="example">
<ul>
	<li v-for="(diff ,index) in difficulty" v-if="diff.group=== 'D'">
		{{index}} - {{diff.name}} : {{diff.group}} : {{diff.score}}
</li>

</ul>
</div>
<script type="text/javascript">
	var example= new Vue({
	el:"#example",
	data:{
		difficulty:[
			{name:'托马斯180接Aflay', group:'A', score: 1.0},
			{name:'分腿水平支撑', group:'B', score: 0.6},
			{name:'屈体720落俯撑', group:'C', score: 1.0},
			{name:'立转1080接垂地劈腿', group:'D', score: 0.9},
			{name:'双无支撑依柳辛接垂地劈腿', group:'D', score: 0.9}
		]
	}
})
</script>

3.v-else
表示 v-if 的“else 块”。

语法：
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

<div id="example">
<button @click="show=!show">点击展示</button>
	<ul v-if="show">
		<li v-for="(d,i) in difficulty" :key="i"
			v-if="d.group=== 'D'" style="background-color:pink;">
			{{i}}_ {{d.name + ", " + d.group+ ", " + d.score}}
		</li>
		<li v-else style="background-color: blue;">
			{{i}}_ {{d.name + ", " + d.group+ ", " + d.score}}
		</li>
	</ul>
</div>
<script type="text/javascript">
	var example= new Vue({
	el:"#example",
	data:{
		difficulty:[
			{name:'托马斯180接Aflay', group:'A', score: 1.0},
			{name:'分腿水平支撑', group:'B', score: 0.6},
			{name:'屈体720落俯撑', group:'C', score: 1.0},
			{name:'立转1080接垂地劈腿', group:'D', score: 0.9},
			{name:'双无支撑依柳辛接垂地劈腿', group:'D', score: 0.9}
		],
		show: true
	}
})
</script>

v-bind

语法： v-bind:属性名=“Vue中的变量”

<div v-bind:class="color"></div>
//可以省略，直接写成： :属性名='属性值' 
<div :class="color"></div>

<div id="example">
<button @click="color='red'">红</button>
<button @click="color='blue'">蓝</button>
<div class="color">
	点击按钮，背景会切换颜色哦
</div>
<script type="text/javascript">
	var example= new Vue({
	el:"#example",
	data:{
		color: "red"
	}
})
</script>

动态切换class

<div :class="{ red: true,blue:false }"></div>

<div id="example">
<button @click="boo=!boo">点击切换背景</button>
	<div :class="{red:boo, blue: !boo}">
		点击按钮，背景会切换颜色哦
	</div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var example = new Vue({
	el: "#example",
	data: {
		boo: true, // 一个布尔标记，判断样式是否生效
	}
})
</script>

首先class绑定的是一个对象： {red:boo, blue: !boo}
red和blue两个样式的值分别是boo和!boo，也就是说这两个样式的生效标记恰好相反，一个
生效，另一个失效。
boo默认为true，默认red生效，blue不生效，点击按钮时boo值取反，blue生效，red不生效。

argentian

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
11
评论
Vue.js基础入门知识

vue渲染<div id="example"><h2>{{value}} </h2></div><script type="text/javascript">//通过new Vue() 来创建vue对象var example= new Vue({ el:"#example", //是element的缩写，给该id的div进行数据渲染 data:{ //数据 name:"Hello world！" }})</script
复制链接

扫一扫