对于初学者来说, 学习 vue.js 最好是在一个简单的 html 页面中进行, 因为这种情况下, 只需要用 script 标签加载 vue.JS 的一个 JS 文件, 就能使用 Vue.JS 了.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue.JS 将 HTML 元素映射为 JS 对象, HTML 元素包含的数据 (包括元素的内容和属性等) 与这个 JS 对象的属性一一对应, 修改对象的属性就是在修改 HTML 元素的内容或属性, 并且修改其中一个, 另一个会跟着改变.
上述 JS 对象称为 视图模型, 对应的 HTML 称为 视图, 这种同步变化的机制称为 双向绑定
绑定元素的文本内容
首先要给出一个标识符, 放在 双大括号 中, 充当元素的文本内容.
- <div id="app">
- <h1>{{ message }}</h1>
- </div>
上面 HTML 代码中, 声明了一个名为 message 的数据, 该数据是 h1 标签的文本内容.
然后使用构造函数 Vue() 来创建相应的视图模型(所有视图模型都是 Vue() 的实例).
- var App = new Vue({
- el: '#app',
- data: {
- message: 'Hello, world!'
- }});
该函数只需要一个参数, 对象类型, 用来传递一些选项:
● el: 必选, CSS 选择器, DOM 节点或函数, 用于声明视图模型对应的视图;
● data: 可选, 对象类型, 用于指出视图有哪些数据, 一个属性就对应一个数据, 属性值就是初始值.
渲染后, 视图中的{{ message }} 就会被替换成属性 message 的值'Hello, world!'
- <div id="app">
- <h1>Hello, world!</h1>
- </div>
此后, 通过实例 App 就可以读写视图上的数据.
实际上, Vue() 实例会代理 data 选项的属性, 因此可以把 data 的属性当作 Vue() 实例的属性来读写. 例如, 在 JS 控制台中, 执行下面命令, 就可以修改数据 message 的值.
App.message = 'Hello, Vue.js!';
注意到修改完 App.message 后, 页面上的文字也跟着改变, 印证了视图模型和视图之间的绑定关系: 一个发生变化, 另一个会跟着改变.
此外, 传递给构造函数 Vue() 的选项也会成为实例 App 的属性, 但加了美元符号 $ 前缀, 这是为了和 data 选项的属性区分开, 比如, 访问 App.$el 就可以得到实例所对应的 DOM 元素.
- App.$el
- // <div id="app">...</div>
绑定元素的 HTML 内容
如果绑定的是 HTML, 而非文本, 给元素添加 v-HTML 属性, 值就是数据的名称.
- <div id="app">
- <span v-HTML="link"></span>
- </div>
- <script type="text/javascript">
- var App = new Vue({
- el: '#app',
- data: {
- link: '<a href="/login">Login</a>'
- }
- });
- </script>
上例中 link 属性的值会被渲染成一个可以点击的 a 元素, 成为 span 元素的 HTML 内容.
- <div id="app">
- <span><a href="/login">Login</a></span>
- </div>
绑定属性的值
将某一属性的值与某一数据绑定, 给属性添加 v-bind: 前缀, 再让属性的值等于数据的名称.
- <div id="app">
- <a v-bind:href="url">Login</a>
- </div>
- <script type="text/javascript">
- var App = new Vue({
- el: '#app',
- data: {
- url: '/login'
- }
- });
- </script>
上例将 a 标签的 href 属性的值与名为 url 的数据绑定.
渲染后, a 标签的 href 属性就会等于属性 url 的值.
<a href="/login">Login</a>
绑定事件
可以向 Vue() 函数传递 methods 选项, 该选项用于存放函数类型的数据. 这些方法在调用时, 伪变量 this 指向所在的 Vue 实例.
- var App = new Vue({
- el: '#app',
- data: {
- name: 'John'
- },
- methods: {
- say: function () {
- return 'Hello,' + this.name;
- }
- }
- });
这些函数可以直接在视图中调用, 结果就是函数的返回值.
- <div id="app">
- <p>{{ say() }}</p>
- </div>
- <div id="app">
- <p>Hello, John</p>
- </div>
除了作为普通函数调用外, 还可以作为事件的处理函数. 绑定事件的方式是添加属性 v-on:xxx, 其中 xxx 就是事件名称.
- <div id="app">
- <button v-on:click="handleClick">点击</button>
- </div>
上例为 button 标签绑定了一个点击事件, 指定事件处理函数的函数名为 handleClick. 这时就需要在 methods 选项中添加 handleClick() 方法.
- var App = new Vue({
- el: '#app',
- data: {
- message: 'Hello, world!'
- },
- methods: {
- handleClick: function () {
- alert(this.message);
- }
- }
- });
之后, 只要触发 button 标签的点击事件, methods 选项中的 handleClick() 方法就会被调用.
Vue.JS 允许在函数名后面跟上小括号, 以传递参数. 如果要将 JavaScript 原生事件对象作为参数传递, 可以直接使用变量 $event
- <div id="app">
- <button v-on:click="handleClick(1, $event)">点击</button>
- </div>
- <script type="text/javascript">
- var App = new Vue({
- el: '#app',
- methods: {
- handleClick: function (a, b, c) {
- console.log(a); // 1
- console.log(b); // MouseEvent {isTrusted: true, screenX: 37, screenY: 119, clientX: 37, clientY: 24, ...}
- console.log(c); // undefined
- }
- }
- });
- </script>
如果只写函数名, 而函数的定义又带有形参, 则默认会向第一个参数传入事件对象.
- <div id="app">
- <button v-on:click="handleClick">点击</button>
- </div>
- <script type="text/javascript">
- var App = new Vue({
- el: '#app',
- methods: {
- handleClick: function (a, b, c) {
- console.log(a); // MouseEvent {isTrusted: true, screenX: 37, screenY: 119, clientX: 37, clientY: 24, ...}
- console.log(b); // undefined
- console.log(c); // undefined
- }
- }
- });
- </script>
计算属性
computed 选项也用于存放函数类型的数据, 与 methods 的区别在于, 调用 computed 中的函数时, 只需给出函数名, 不需要小括号.
- <div id="app">
- <p>{{ reversedText }}</p>
- </div>
- <script type="text/javascript">
- var App = new Vue({
- el: '#app',
- data: {
- text: '123456'
- },
- computed: {
- reversedText: function () {
- return this.text.split('').reverse().join(''); // "654321"
- }
- }
- });
- </script>
上面代码, reversedText 看起来像是 data 中的一员, 而不像函数调用, 因此被称为 计算属性
来源: http://www.css88.com/web/vue-js/10736.html