- 模板语法
- 普通文本
Vue使用{{ key }}获取js中data() 函数返回值。获取的值中如果包含HTML代码,不会解析,原格式输出。
-
- 修改代码
修改项目中App.vue代码。
下面代码符合MVVM。
data() 函数返回值就是Model 对象。方法data()是固定的。
{{}}就是从Model中取值。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<p>
我们的名称为:{{name}},已经成立了{{age}}年了。
</p>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data(){
return {
name:"北京尚学堂",
age: 15
}
}
}
</script> |
-
- 页面
修改后不需要重启项目,会自动帮助我们重新编译项目,页面也不需要刷新就可以显示最终效果。(这点太人性了)
- HTML支持
如果希望能够解析HTML,必须使用v-html指令。
v-html是任意HTML标签的属性,v-html的取值可以是Model中定义的字段。
我的名字叫做:{{name}},年龄:{{age}},描述:<span v-html="desc"></span> |
export default {
name: 'App',
components: {
HelloWorld
},
data(){
return {
name:"北京尚学堂",
age:15,
desc:"我是<b>好人</b>"
};
}
} |
- 指令
在vue中所有以v-开头的HTML属性都是叫做指令。
之前学习Thymeleaf时就是通过属性控制标签。指令的作用和Thyemeleaf中条件判断等功能是一样的。
- 条件判断
条件判断最多支持
v-if=”表达式”
v-else-if=”表达式”
v-else
联合使用。也可以像Java中一样单用v-if或v-if和v-else结合使用。
表达式中的变量来源于Model。如果是字符串类型值使用单引号包含。
<template>
<div id="bjsxt">
<p v-if="age<10">
不到10年了
</p>
<p v-else-if="age<14 && age >=10">
不到14年了
</p>
<p v-else>
大于14年了
</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
name: "北京尚学堂-Java学院",
age: 15
}
}
}
</script> |
- 循环遍历
语法:
v-for=”迭代变量 in 数组属性”
:key=”迭代变量” 此属性必须写,否则页面报错
<template>
<div id="bjsxt">
<ul>
<li v-for="subject in subjects" :key="subject">
{{subject}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
name: "北京尚学堂-Java学院",
age: 15,
subjects: ["Java", "AI", "大数据","前端"]
}
}
}
</script> |
- Vue的事件处理
Vue的事件都是使用 v-on:事件类型 进行绑定。也可以使用@事件类型进行操作。其中事件类型和之前学习jQuery中事件名称是一样。
示例中都是以点击事件为例。
- 直接操作属性值
代码示例中通过点击按钮对counter值加一。下面<p>中显示属性值。所以会出现点击按钮后下面数字在变化的效果
<template>
<div id="app">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
counter: 0
}
}
}
</script> |
也可以把上面的v-on:click换成@click。
<button @click="counter += 1">Add 1</button> |
- 事件处理方法
Vue中事件也可以绑定给特定的方法进行处理。
@click取值是方法名称
methods是固定属性。里面定义了多有事件能绑定的方法。
jqk:function(event)中
jqk 是方法名。
event是方法形参,在js中方法形参名称随意。只要@click中使用没有参数的方法时,都会默认传递事件对象。如果方法中不使用事件对象,function里面就不需要写event了,在Vue中变量声明后必须使用。
<template>
<div id="app">
<button @click="jqk">click</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
field:"值"
};
},
methods:{
jqk:function (event) {
// this是当前Vue对象
alert(this.field);
if(event){
alert(event.target.tagName)
}
}
}
}
</script> |
- 事件传参
事件传参只需要在调用方法时加上括号和要传递的参数就可以了。
注意:
字符串值必须有单引号。
没有单引号参数(field),调用data()中属性
方法中不需要使用事件对象时就不写$event。但是如果需要使用事件对象,必须手动传递事件对象,且必须叫做$event,$event是全局Vue对象原型(prototype)里面的属性。
事件调用方法时传递了多个参数,在定义方法时可以只接收参数中前N个(N>=0&&N<=调用时参数个数),但是一定接收了,就必须使用。
<template>
<div id="app">
<button @click="jqk('name',$event)">click</button>
<button @click="jqk(field,$event)">click</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
field:"值"
};
},
methods:{
jqk:function (name,event) {
alert("name:"+name);
if(event){
alert(event.target.tagName)
}
}
}
}
</script> |