vue笔记（一）基础语法

记录一些vue的例子，整理自官方文档。

vue可以理解为js进阶版中的一种，相关内容如下：

1、vue.js 核心
2、VueRouter2 实现路由组织工具。
3、webpack 项目打包以及编译工具。
4、nodejs 前端开发环境。
5、npm 前端包管理器。
6、axios ajax 接口请求工具。
7、sass-loader 和 node-sass css 预处理。
8、element 基于 vue 的后台组件库。
9、iview 基于 vue 的另一套后台组件库。
10、vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具。

data 用于定义属性
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。


1，使用 v-html 指令用于输出 html 代码，正好可以在含有格式（html）的文章使用：

2，HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

  修改颜色
 


 

directiva v-bind:class
 

3，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{5+5}}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

菜鸟教程

4，指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

现在你看到我了

5，参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

菜鸟教程

另一个例子是 v-on 指令，它用于监听 DOM 事件，在这里参数是监听的事件名。


6，修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

//取消事件的默认操作，对应这里的form就是取消提交操作

7，在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

{{ message }}

8，按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：

{{ message }}

反转字符串

9，过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：

  {{ message | capitalize }}

10，过滤器是 JavaScript 函数，因此可以接受参数：
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
{{ message | filterA('arg1', arg2) }}

11，v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：





v-on 缩写





12，当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。
Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新。


13，条件判断使用 v-if 指令：

现在你看到我了

14，可以用 v-else 指令给 v-if 添加一个 "else" 块：

  Sorry

  Not sorry

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

  A

  B

  C

  Not A/B/C

15，我们也可以使用 v-show 指令来根据条件展示元素：

Hello!

比较：
v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译
v-show 元素始终被编译并保留，只是简单地基于 CSS 切换。


16，循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：

 

1. 
     {{ site.name }}
   

 

 


v-for 可以通过一个对象的属性来迭代数据：

 

• 
  {{ value }}
  

 

 


也可以提供第二个的参数为键名，第三个参数为索引：

 

• 
  {{ index }}. {{ key }} : {{ value }}
  

 

v-for 也可以循环整数：

 

• 
  {{ n }}
  

 

17，计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：

 

原始字符串: {{ message }}

 

计算后反转字符串: {{ reversedMessage }}

 


computed vs methods：
可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。


18，Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化:

千米 :
米 :

19，可以为 v-bind:class 设置一个对象，从而动态的切换 class:

 

也可以在对象中传入更多属性用来动态切换多个 class ：

v-bind:class="{ active: isActive, 'text-danger': hasError }">

也可以直接绑定数据里的一个对象：

 

20，可以在 v-bind:style 直接设置样式：可以在 v-bind:style 直接设置样式：

hihi vue

也可以直接绑定到一个样式对象，让模板更清晰：

 

hihi vue

21，我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。

   
  Greet

 


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

  Say hi
  Say what

 


22，Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。

...

...

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：


记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

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



如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：


如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：


24，组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用。
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：


全局组件：
所有实例都能用全局组件，注册一个简单的全局组件 runoob，并使用它：

 


我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

 


25，prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

 


动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

 
 

 

 


26，组件可以为 props 指定验证要求。
prop 是一个对象而不是字符串数组时，它包含验证要求：
Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})


27，如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：

如：@keyup.enter.native="loginHandler"


28，除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

页面载入时，input 元素自动获取焦点：

 


29，路由（下载）：


 

 

Hello App!

 

   
   
   
    Go to Foo
    Go to Bar
 

 
 
 

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '

foo

' }
const Bar = { template: '

bar

' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')