vuejs入门

来源：互联网发布：如何通过网络挣钱编辑：程序博客网时间：2024/05/30 23:12

vuejs入门

安装

简单的使用方式，CDN导入vue，如下面的例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>学习Vue</title></head><body>    <div id="app">        <h1>{{ message }}</h1>    </div>    <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>    <script type="text/javascript">        new Vue({            el: '#app',            data: {                message: 'Hello Vue!'            }        })    </script></body></html>

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli$ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖，并运行

# 安装依赖，走你$ cd my-project$ npm install$ npm run dev

默认端口是8080

sublime可以下载vue syntax highlight插件来语法高亮.vue

Vue.js组件的重要选项

data vue中的数据都是放在data里面的
methods方法
watch监听

如：

new Vue({  el: '#app',  data: {    firstName: 'Bo',    lastName: 'Andersen'  },  methods: {    getFullName: function(first, last){        return {        name: first + ' ' + last      }    }  }})

可以这样使用方法

<h1>{{ getFullName(firstName, lastName).name }}</h1>

模板语法

插值

文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值

<h1>{{ firstName}}</h1>

纯HTML

v-html 指令输出真正的 HTML

<div v-html="rawHtml"></div>

属性

Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令

如定义如下的Vue实例

new Vue({  el: '#app',  data: {    blogUrl: 'https://cn.vuejs.org'  }})

有个<a>标签，想设置其href属性，如果使用Mustache，href并不会是想要设定的值：

<a href="{{ blogUrl }}">Vuejs</a>

所以要使用v-bind

<a v-bind:href="blogUrl">Vuejs</a>

v-on事件绑定

例如，给一个button绑定一个click事件

<div id="app">  <button v-on:click="clickedButton">Click here!</button></div>new Vue({  el: '#app',  methods: {    clickedButton(){        alert('Clicked The Button')    }  }})

内联处理器方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<div id="example-3">  <button v-on:click="say('hi')">Say hi</button>  <button v-on:click="say('what')">Say what</button></div>new Vue({  el: '#example-3',  methods: {    say: function (message) {      alert(message)    }  }})

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。
Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

`v-bind` 缩写

<!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a>

`v-on` 缩写

<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>

指令

<p v-if="seen">Now you see me</p>

v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素

其它如v-if-else和v-else

<div id="app">    <p v-if="itemsInStock < 10">if</p>    <p v-if-else="itemsInStock > 15">else-if</p>    <p v-else>else</p></div>new Vue({  el: '#app',  data: {    itemsInStock: 16  }})

展示和隐藏元素

v-show展示和隐藏元素

<div id="app">      <button v-on:click="show = !show">Toggle</button>      <p v-show="show">hello</p></div>new Vue({  el: '#app',  data: {    show: true  }})

事件处理器

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求

为了解决这个问题， Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.stop.prevent.capture.self.once

如：

<a href="https://cn.vuejs.org" v-on:click.prevent="showDialog" target="_blank">here</a>

表单控件绑定

v-model 指令在表单控件元素上创建双向数据绑定

v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。

如：

<div id="app">    <input type="text" v-model="name">    <p>You Entered: {{ name }}</p></div>new Vue({  el: '#app',  data: {    name: ''  }})

v-model

修饰符

.trim自动过滤用户输入的首尾空格

<input type="text" v-model.trim="name">

.number
自动将用户的输入值转为 Number 类型

如下：

<div id="app">    <input type="text" v-model="age">    <p>You Entered: {{ age }}</p>    <p>Type:{{ typeof age }}</p></div>new Vue({  el: '#app',  data: {    name: '',    age: 24  }})

最开始未输入时，typeof age为number

这里写图片描述

但当开始输入时，typeof age则为string

这里写图片描述

所以使用<input type="text" v-model.number="age">

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<input type="text" v-model.number.lazy="age">

如下，在input失去焦点时改变

这里写图片描述

列表渲染

v-for 指令根据一组数组的选项列表进行渲染

<ul id="example-1">  <li v-for="item in items">    {{ item.message }}  </li></ul>

v-for 还支持一个可选的第二个参数为当前项的索引

<ul id="example-2">  <li v-for="(item, index) in items">    {{ parentMessage }} - {{ index }} - {{ item.message }}  </li></ul>

0 0

vuejs入门

vuejs入门

安装

命令行工具

模板语法

插值

文本

纯HTML

属性

v-on事件绑定

缩写

v-bind 缩写

v-on 缩写

指令

展示和隐藏元素

事件处理器

表单控件绑定

修饰符

列表渲染

`v-bind` 缩写

`v-on` 缩写