基本语法

1、基本数据渲染和指令

创建 01-基本数据渲染和指令.html 你看到的 v-bind 特性被称为指令。指令带有前缀 v-  除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号(:)
data: {
    content: '我是标题',
    message: '页面加载于 ' + new Date().toLocaleString()
}
<!-- 如果要将模型数据绑定在html属性中,则使用 v-bind 指令
     此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
    {{content}}
</h1>
<!-- v-bind 指令的简写形式: 冒号(:) -->
<h1 :title="message">
    {{content}}
</h1>

2、双向数据绑定

创建 02-双向数据绑定.html 双向数据绑定和单向数据绑定:使用 v-model 进行双向数据绑定  
data: {
    searchMap:{
        keyWord: 'wsz'
    }
}
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定  -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是:{{searchMap.keyWord}}</p>

3、事件

创建 03-事件.html 需求:点击查询按钮,按照输入框中输入的内容查找公司相关信息 在前面的例子基础上,data节点中增加 result,增加 methods节点 并定义 search方法
data: {
    searchMap:{
        keyWord: '百度'
    },
    //查询结果
    result: {}
},
methods:{
    search(){
   console.log('search');
    this.result = {
        "title":"百度",
        "site":"http://www.baidu.com"
    }
} }
html中增加 button 和 p 使用 v-on 进行数件处理,v-on:click 表示处理鼠标点击事件,事件调用的方法定义在 vue 对象声明的 methods 节点中
<!-- v-on 指令绑定事件,click指定绑定的事件类型,事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>
<p>您要查询的是:{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
简写
<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

4、修饰符

创建 04-修饰符.html 修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。 例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault(): 即阻止事件原本的默认行为
data: {
    user: {}
}
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault():
     即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
    <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">保存</button>
    </label>
</form>
methods: {
    onSubmit() {
        if (this.user.username) {
            console.log('提交表单')
        } else {
            alert('请输入用户名')
        }
    }
}

5、条件渲染

创建 05-条件渲染.html v-if:条件指令
data: {
    ok: false
}

注意:单个复选框绑定到布尔值

<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令:还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if:Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>

6、列表渲染

创建 06-列表渲染.html v-for:列表循环指令 例1:简单的列表渲染
<!-- 1、简单的列表渲染 -->
<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
    <!-- 如果想获取索引,则使用index关键字,注意,圆括号中的index必须放在后面 -->
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>

例2:遍历数据列表

data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}
<!-- 2、遍历数据列表 -->
<table border="1">
    <!-- <tr v-for="item in userList"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>

 

上一篇:大众:L4自动驾驶是极限,L5永远不可能实现


下一篇:Kubernetes平台环境搭建