vue学习笔记01-基础内容整理

0.1 what's this

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

一 模板语法

vue采用声明式渲染，用简洁的模板语法将数据渲染进DOM系统

1.1 插值：

1.1.1 文本

数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值：

<p>{{ message }}</p>

1.1.2 Html

使用 v-html 指令用于输出 html 代码

1.1.3 属性

HTML 属性中的值使用 v-bind 指令

<div v-bind:class="{'class1': use}" />

1.1.4 表达式

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

<div v-bind:id="'list-' + id" />

1.1.5 指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<p v-if="seen">现在你看到我了</p>

1.1.5.1 参数

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

<pre><a v-bind:href="url">lalala</a></pre>

1.1.5.2 修饰符

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

<form v-on:submit.prevent="onSubmit"></form>

1.2 用户输入

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

1.3 过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->

{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

1.4 缩写

1.4.1 v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写

<!-- 完整语法 -->

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

1.4.2 v-on 缩写

<!-- 完整语法 -->

<a v-on:click="doSomething"></a>

<!-- 缩写 -->

<a @click="doSomething"></a>

二、条件/循环语句

2.1 条件判断

2.1.1 v-if  

条件判断使用 v-if 指令, v-if 指令将根据表达式 的值(true 或 false )来决定是否插入元素。

2.1.2 v-else

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

2.1.3 v-else-if

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

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

2.1.4 v-show

也可以使用 v-show 指令来根据条件展示元素，用法基本与v-if相同

2.2 循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表

<li v-for="site in sites"> {{ site.name }}</li>

也可以通过一个对象的属性来迭代数据

<li v-for="value in object"> {{ value }}</li>

new Vue({

  el: '#app',

  data: {

    object: {

      name: '菜鸟教程',

      url: 'http://www.runoob.com',

      slogan: '学的不仅是技术，更是梦想！'

    }

  }

})

v-for 也可以循环整数

<li v-for="n in 10"> {{ n }}</li>

三、父子组件传值

3.1 父组件给子组件传值：

父组件在调用子组件的时候，绑定动态属性

<v-children :title='title'  :run='run'  :home="this"  />

在子组件里面通过props接收父组件传过来的数据,常规接收方式：

props:['title','run','home']

校验props合法性：

props:{

   'title':String

}