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
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不生效。
更多推荐
所有评论(0)