VUE

10次阅读

共计 2384 个字符，预计需要花费 6 分钟才能阅读完成。

(1) 引入 Vue.js 文件
(2) 创建 Vue 对象

el: 指定用 vue 来管理页面的哪个标签区域
data: 初始化数据(页面可以访问)

(3) 双向数据绑定：v-model
(4) 使用大括号表达式，向页面输出数据, 可以调用对象的方法. {{exp}}
(5) 理解 vue 的 MVVM 实现
M – Model 模型，数据对象(data)
V – View 视图，模板页面
VM – viewModel 视图模型(Vue 的实例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 基本使用 </title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <p>hello {{message}}</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {message: 'aaa'}
    })
</script>
</body>
</html>

效果展示：hello xxx 可随着输入框内容的变化而变化

* 动态的 html 页面
* 包含了一些 js 语法代码
* 大括号表达式
* 指令(以 v - 开头的自定义标签属性)

* 语法：{{exp}}
* 功能：向页面输出数据，可以调用对象的方法

举例 1：大括号表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 大括号表达式 </title>
</head>
<body>
<div id="app">
    <h5> 大括号表达式 </h5>
    <p>{{message}}</p>
    <p>{{message.toUpperCase()}}</p><!-- 调对象的方法 -->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {message: 'I will back'}
    })
</script>
</body>
</html>

结果：

举例 2：
v-text 将内容理解为文本，即使内容是标签
v-html 将内容理解为标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 大括号表达式 </title>
</head>
<body>
<div id="app">
    <p v-text="message"></p><!-- 相当于 textContent-->
    <p v-html="message"></p><!-- 相当于 innerHTML-->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {message: '<a href="http:/www.baidu.com">I will back</a>'}
    })
</script>
</body>
</html>

结果：

功能：指定变化的属性值
完整写法：
v-bind:xxx=’yyy’ //yyy 会作为 表达式 来解析执行
简洁写法：
:xxx=’yyy’
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 强制数据绑定 </title>
</head>
<body>
<div id="app">
    <h5> 强制数据绑定 </h5>
    <img src="imgUrl">
    <img v-bind:src="imgUrl">
    <img :src="imgUrl"><!-- 简写形式 -->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {imgUrl: 'img1.png'}
    })
</script>
</body>
</html>

结果：<img src=”imgUrl”> 将属性值当作常量 imgUrl, 未找到图片，则不显示。如果使用强制绑定，则 src 的属性值当作表达式解析

功能：绑定指定事件名的回调函数
完整写法:
v-on: 事件名 = ‘xxx’
简洁写法:
@事件名 =’xxx’

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 绑定事件监听 </title>
</head>
<body>
<div id="app">
    <h4> 绑定事件监听 </h4>
    <button v-on:click="test"> 点击 </button>
    <button v-on:click="test1('abc')"> 点击 1 </button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: { },
        methods: {test(){alert('hello')
            },
            test1(content){alert(content)
            }
        }
    })
</script>
</body>
</html>

结果：
使用 methods 属性，属性值为事件绑定的构造函数。根据需要，可传参，可不传参。

正文完