Vue.js

• 模板语法

1. 普通文本

Vue使用{{ key }}获取js中data() 函数返回值。获取的值中如果包含HTML代码，不会解析，原格式输出。

1. 1. 修改代码

修改项目中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>

1. 1. 页面

修改后不需要重启项目，会自动帮助我们重新编译项目，页面也不需要刷新就可以显示最终效果。（这点太人性了）

1. 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中条件判断等功能是一样的。

1. 条件判断

条件判断最多支持

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>

1. 循环遍历

语法：

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中事件名称是一样。

示例中都是以点击事件为例。

1. 直接操作属性值

代码示例中通过点击按钮对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>

1. 事件处理方法

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>

1. 事件传参

事件传参只需要在调用方法时加上括号和要传递的参数就可以了。

注意：

字符串值必须有单引号。

没有单引号参数(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>