Vue 基础语法

Vue 基础语法

1. Vue 项目结构

使用 Vue Cli 创建出来的项目内容比较多，重点关注 src 目录下的文件：

---

• public
  • favicon.ico：图标
  • index.html：唯一页面
• src：
  • assert
    • logo.png：图片
  • components
    • HelloWorld.vue 组件。所有可复用的页面都可以做成组件。一般用于开发控制逻辑
  • views
    • XxxView.vue：视图组件。用于开发存储的视图逻辑。
  • App.vue 主组件。SPA 项目中所有内容都是显示在这个页面中的，当访问 http://localhost:8080 时实际访问的就是这个页面。
  • main.js 入口 js 文件。整个项目的总体配置。
• package.json 包含当前项目所依赖的所有组件信息。

---

2. 模板语法

Vue 使用 { { key }} 获取 js 中 data() 函数返回值。修改项目中的 App.vue 代码：

<template>
    <div id="app">
        <img src="./assets/logo.png" alt="Vue logo">
        <HelloWorld msg="Welocome 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: 90
        }
    }
}
</script>

<style>
#app{
     
     
    text-align: center
}
</style>

3. 条件渲染

在 vue 中所有以 v-开头的 HTML 属性都称为指令。v-if 指令用于条件性地渲染一块内容，表达式中变量的值来源于data(){ ... }。

<template>
    <div id="app">
        <div v-if="happy">我现在非常高兴!</div>
        <div v-else>不，我现在心情十分糟糕！</div>
    </div>
</template>

<script>
export default {
     
     
    name: 'App',
    data(){
     
     
        return {
     
     
            happy: true,
        }
    }
}
</script>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的 ”else-if“ 块，可以连续使用：

<template>
    <div id="app">
        <div v-if="score >= 90">优秀</div>
        <div v-else-if="score >= 80">良好</div>
        <div v-else-if="score >= 70">一般</div>
        <div v-else-if="score >= 60">及格</div>
        <div v-else>不及格</div>
    </div>
</template>

<script>
export default {
     
     
    name: 'App',
    data(){
     
     
        return {
     
     
            score: 75,
        }
    }
}
</script>

4. 列表渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是原数据数组，而 item 则是被迭代的数组元素的别名。

数组或列表数据的渲染语法：v-for="迭代变量 in 数组属性" :key="迭代变量"，:key 这个属性必须写，不然页面会报错。

<template>
    <div id="app">
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="stu in students" :key="stu">
                <td>{
    
    {
    
    stu.name}}</td>
                <td>{
    
    {
    
    stu.age}}</td>
                <td>{
    
    {
    
    stu.gender}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    
    
    name: 'App',
    data(){
    
    
        return {
    
    
            students: [
                {
    
    
                    name: '张三',
                    age: 18,
                    gender: '男'
                },
                {
    
    
                    name: '李四',
                    age: 24,
                    gender: '女'
                },
                {
    
    
                    name: '王五',
                    age: 25,
                    gender: '男'
                },
            ]
        }
    }
}
</script>

v-for 还支持一个可选的参数，即当前项的索引 index。

<template>
    <div id="app">
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="(stu, index) in students" :key="stu">
                <td>{
   
   {index}}</td>
                <td>{
   
   {stu.name}}</td>
                <td>{
   
   {stu.age}}</td>
                <td>{
   
   {stu.gender}}</td>
            </tr>
        </table>
    </div>
</template>

5. 绑定事件

​ Vue 的事件都是使用 v-on:事件类型 进行绑定，也可以使用 @事件类型 进行绑定监听 DOM 事件，并在触发时运行一些 JavaScript 代码。其中事件类型与 jQuery 中事件名称是一样的。事件绑定是 Vue 基础语法中最基础、最重要的内容，很多异步网络请求都是基于用户触发的事件产生的。

5.1 直接操作属性值

<template>
    <div id="app">
        <button v-on:click="counter += 1">Add 1</button>
        &emsp;&emsp;
        <button v-on:click="counter = 0">reset 0</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>
<button @click="counter = 0">reset 0</button>

5.2 事件处理方法

Vue 中事件也可以绑定给特定的方法进行处理。@click 取值是方法名称，methods:{ ... } 是固定属性，放置页面中的业务逻辑，js 方法一般都要放置在 methods 中。

<template>
    <div id="app">
        <button v-on:click="sayHello">点我打招呼</button>
    </div>
</template>

<script>
    export default {
     
     
        name: 'App',
        data(){
     
     
            return {
     
     
                str: "Hello Boy"
            }
        },
        methods:{
     
     
            //sayHello是方法名
            sayHello:function () {
     
     
                // this是当前Vue对象
                alert(this.str)
            }
        }
    }
</script>

sayHello:function (event){ ... }：event 是方法形参，在 js 中方法形参名称，只要 @click 中使用没有参数的方法时，都会默认传递事件对象。如果方法中不使用事件对象，function 里面就不需要写 event 了。

5.3 事件传参

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

<template>
    <div id="app">
        <!--传递参数：字符串、变量、事件-->
        <button @click="sayHello('Hello girl', $event)">点击按钮1</button>
        <button @click="sayHello(field, $event)">点击按钮2</button>
    </div>
</template>

<script>
    export default {
     
     
        name: 'App',
        data(){
     
     
            return {
     
     
                field: "Hello Boy"
            }
        },
        methods:{
     
     
            sayHello:function (name,event) {
     
     
                alert("say:" + name);
                if(event){
     
     
                    console.log(event.target.tagName);
                }
            }
        }
    }
</script>

1. data 属性：用来组织从 view 中抽象出来的属性或变量，可以说将视图的数据抽象出来存放在 data 中；
2. methods 属性：放置页面中的业务逻辑，js 方法一般都要放置在 methods 中。

方法中不需要使用事件对象时就不写 $event，但是如果需要使用事件对象，必须手动传递事件对象，且必须写为 $event，$event 是全局 Vue 对象原型(prototype)里面的属性。

6. 双向数据绑定

Vue.js 是一个 MVVM 框架，即双向数据绑定，**当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。**在表单中使用双向数据绑定，可以使用 v-model 指令在表单 <input>、<textarea> 以及 <select> 元素上创建双向数据绑定，它负责监听用户的输入事件以更新数据。

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件；

文本输入框：

<template>
    <div id="app">
        输入框的内容：<input type="text" v-model="message"/><br/>
        <p>您输入的信息是：{
   
   {message}}</p>
    </div>
</template>

<script>
    export default {
     
     
        name: 'App',
        data(){
     
     
            return {
     
     
                message: ""
            }
        },
        methods:{
     
     

        }
    }
</script>

多行文本：

<template>
    <div id="app">
        输入的信息：<br><br>
        <textarea v-model="info" placeholder="请输入您的评价"></textarea><br>
        <p>您输入评价的内容是：{
   
   {info}}</p>
    </div>
</template>

<script>
    export default {
     
     
        name: 'App',
        data(){
     
     
            return {
     
     
                info: ""
            }
        }
    }
</script>

注意：在文本区域插值 (<textarea>{ {text}}</textarea>) 并不会生效，应用 v-model 来代替。

复选框：

<template>
    <div id="app">
        所在地：
        <input type="checkbox" id="beijing" value="北京" v-model="checkedNames">
        <label for="beijing">北京</label>
        <input type="checkbox" id="shanghai" value="上海" v-model="checkedNames">
        <label for="shanghai">上海</label>
        <input type="checkbox" id="wuhan" value="武汉" v-model="checkedNames">
        <label for="wuhan">武汉</label>
        <input type="checkbox" id="guangzhou" value="广州" v-model="checkedNames">
        <label for="guangzhou">广州</label>
        <br><br>
        选中的项：{
   
   {checkedNames}}
    </div>
</template>

<script>
    export default {
     
     
        name: 'App',
        data(){
     
     
            return {
     
     
                checkedNames: []
            }
        }
    }
</script>

单选框：

<template>
    <div id="app">
        性别：
        <input type="radio" id="one" value="男" v-model="checked">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="checked">
        <label for="one">女</label>
        <br>
        您选择的是：{
   
   {checked}}
    </div>
</template>

<script>
    export default {
     
     
        name: 'App',
        data(){
     
     
            return {
     
     
                checked: '',
            }
        }
    }
</script>

下拉框：

<template>
    <div id="app">
        所属地区：
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option value="湖北省">湖北省</option>
            <option value="江苏省">江苏省</option>
            <option value="浙江省">浙江省</option>
            <option value="广东省">广东省</option>
        </select>
        您选择的是：{
   
   {selected}}
    </div>
</template>

<script>
    export default {
     
     
        name: 'App',
        data(){
     
     
            return {
     
     
                selected: '',
            }
        }
    }
</script>

如果是多选则绑定一个空的数组，如果是单选就绑定一个空字符串。