Vue官方学习笔记

1.体积小

压缩后33K；

2.更高的运行效率

基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。

3.双向数据绑定

让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上；

4生态丰富、学习成本低

市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件!拿来即用实现快速开发!

对初学者友好、入门容易、学习资料多；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app"> 
	  {{ message }} {{name}} 
	</div>
  &lt;script type="text/javascript"&gt; 

var app = new Vue({ //Vue是通过上面引入vue.js获得的全局变量，通过new获得一个app应用对象

	el: '#app', //el是Element选项，通过ID选择器的方式选中#app div

	data: { //用于保存数据，在div视图中声明了哪些变量，需要data中为变量注册和初始化赋值。 

		message: 'Hello Vue!',

		name : "Vue"

	}

});

&lt;/script&gt;  
 </body>
</html>

运行到内置浏览器

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用

vm

(ViewModel 的缩写) 这个变量名表示 Vue 实例。

当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档中浏览完整的选项列表。

一个 Vue 应用由一个通过

new Vue

创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

当一个 Vue 实例被创建时，它将

data

对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

体验Vue的响应式，重新定义data变量的值

重新定义vm变量的值（取data或者vm变量最后一次的赋值）

没有进行new Vue的声明的变量不会生效

使用

Object.freeze()方法

，这会阻止修改现有的变量，也意味着响应系统无法再追踪变化。

Vue除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀

，以便与用户定义的属性区分开来。例如：

$watch实例方法

重新赋值要在$watch后面，红色框看到了变化，蓝色框是vue-devtools内置浏览器没有装可以忽略，绿色框是没有定义阻止 vue 在启动时生成生产提示可以忽略。

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。

声明周期需要写在new Vue传递的对象内，以属性(函数)的方式进行声明。

在Vue应用运行的每个阶段都会调用已声明的生命周期函数。

常用的生命周期钩子

其他的生命周期钩子

activated deactivated beforeDestroy destroyed errorCaptured

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

插值

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

  < span>Message: {{ msg }} </ span>

Mustache 标签将会被替代为对应数据对象上

msg

property 的值。无论何时，绑定的数据对象上

msg

property 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

  < span  v-once>这个将不会改变: {{ msg }} </ span>

原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用

v-html

指令：

  < p>Using mustaches: {{ rawHtml }} </ p>

 < p>Using v-html directive:  < span  v-html= "rawHtml"> </ span> </ p>

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

通过v-html指令让变量变成html元素

这个

span

的内容将会被替换成为 property 值

rawHtml

，直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用

v-html

来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用

v-bind

指令：

  < div  v-bind:id= "dynamicId"> </ div>

通过v-bind指令为HTML标签绑定属性

切换绑定的class不同属性

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

 {{ number + 1 }}

 {{ ok ? 'YES' : 'NO' }}
  {{ message.split('').reverse().join('') }}
     < div  v-bind:id= "'list-' + id"> </ div>

算数运算

三元运算

函数运算

先将vue拆分成单个字母，split拆分成不同数组，reverse进行反序排列，join进行重组结合成一个字符串。

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

  <!-- 这是语句，不是表达式 -->

{{ var a = 1 }}     <!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如

Math

和

Date

。你不应该在模板表达式中试图访问用户定义的全局变量。

指令 (Directives) 是带有

v-

前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (

v-for

是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

 <!  DOCTYPE html  > 
 <  html  > 
 <  head  > 
 <  meta  charset  ="utf-8"  > 
 <  title  ></  title  > 
 <  script  src  ="vue.js"  type  ="text/javascript"  charset  ="utf-8"  ></  script  > 
 </  head  > 
 <  body  > 
 <  div  id  ="app"  > 
     <  p  v-if  ="seen"  > 现在你看到我了 </  p  > 
 </  div  > 
 <  script  type  ="text/javascript"  > 
 var  vm  =   new  Vue({  //  定义一个Vue的实例的变量 
 el   :  "  #app  "  ,

    data : {

        seen :  true   //  如果是false就不会被渲染 
 }

});  </  script  > 
 </  body  > 
 </  html  >

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，

v-bind

指令可以用于响应式地更新 HTML attribute：

 <!  DOCTYPE html  > 
 <  html  > 
 <  head  > 
 <  meta  charset  ="utf-8"  > 
 <  title  ></  title  > 
 <  script  src  ="vue.js"  type  ="text/javascript"  charset  ="utf-8"  ></  script  > 
 </  head  > 
 <  body  > 
 <  div  id  ="app"  > 
     <  p  v-if  ="seen"  > 现在你看到我了 </  p  > 
     <  a  v-bind:href  ="url"  > 链接 </  a  > 
 </  div  > 
 <  script  type  ="text/javascript"  > 
 var  vm  =   new  Vue({  //  定义一个Vue的实例的变量 
 el   :  "  #app  "  ,

    data : {

        seen :  true  ,  //  如果是false就不会被渲染 
 url :  "  http://www.baidu.com  "  }

});  </  script  > 
 </  body  > 
 </  html  >

指令修饰符

修饰符 (modifier) 是以半角句号

指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，

.prevent

修饰符告诉

v-on

指令对于触发的事件调用

event.preventDefault()

：

 <!  DOCTYPE html  > 
 <  html  > 
 <  head  > 
 <  meta  charset  ="utf-8"  > 
 <  title  ></  title  > 
 <  script  src  ="vue.js"  type  ="text/javascript"  charset  ="utf-8"  ></  script  > 
 </  head  > 
 <  body  > 
 <  div  id  ="app"  > 
     <  p  v-if  ="seen"  > 现在你看到我了 </  p  > 
     <  a  v-bind:href  ="url"  > 链接 </  a  > 
     <  div  @click  ="click1"  > 
         <  div  @click  ="click2"  >  chick me  </  div  > 
     </  div  > 
 </  div  > 
 <  script  type  ="text/javascript"  > 
 var  vm  =   new  Vue({  //  定义一个Vue的实例的变量 
 el   :  "  #app  "  ,

    data : {

        seen :  true  ,  //  如果是false就不会被渲染 
 url :  "  http://www.baidu.com  "  },

    methods:{

        click1 :  function  () {

            console.log(  '  click1...  '  );

        },

        click2 :  function  () {

            console.log(  '  click2...  '  );

        }

    }

});  </  script  > 
 </  body  > 
 </  html  >

通过修饰符(.stop)让事件停下来不执行click1

 <!  DOCTYPE html  > 
 <  html  > 
 <  head  > 
 <  meta  charset  ="utf-8"  > 
 <  title  ></  title  > 
 <  script  src  ="vue.js"  type  ="text/javascript"  charset  ="utf-8"  ></  script  > 
 </  head  > 
 <  body  > 
 <  div  id  ="app"  > 
     <  p  v-if  ="seen"  > 现在你看到我了 </  p  > 
     <  a  v-bind:href  ="url"  > 链接 </  a  > 
     <  div  @click  ="click1"  > 
         <  div  @click.stop  ="click2"  >  chick me  </  div  > 
     </  div  > 
 </  div  > 
 <  script  type  ="text/javascript"  > 
 var  vm  =   new  Vue({  //  定义一个Vue的实例的变量 
 el   :  "  #app  "  ,

    data : {

        seen :  true  ,  //  如果是false就不会被渲染 
 url :  "  http://www.baidu.com  "  },

    methods:{

        click1 :  function  () {

            console.log(  '  click1...  '  );

        },

        click2 :  function  () {

            console.log(  '  click2...  '  );

        }

    }

});  </  script  > 
 </  body  > 
 </  html  >

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用

v-bind

处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将

v-bind

用于

class

和

style

时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

我们可以传给

v-bind:class

一个对象，以动态地切换 class：

 <!  DOCTYPE html  > 
 <  html  > 
 <  head  > 
 <  meta  charset  ="utf-8"  > 
 <  title  ></  title  > 
 <  script  src  ="vue.js"  type  ="text/javascript"  charset  ="utf-8"  ></  script  > 
 </  head  > 
 <  body  > 
 <  div  id  ="app"  > 
     <  div  v-bind:class  ="{ active: isActive }"  style  ="width:200px; height:200px; text-align:center; line-height:200px;"  >  hi vue  </  div  >  >  </  div  > 
 <  script  type  ="text/javascript"  > 
 var  vm  =   new  Vue({  //  定义一个Vue的实例的变量 
 el   :  "  #app  "  ,

    data : {

        isActive :  true   //  如果是false第11行将不会进行绑定 
 }

});  </  script  > 
 <  style  >  .active  {  background  :  #FF0000  ;  } 
 </  style  >  >  </  body  > 
 </  html  >

可以在对象中传入更多字段来动态切换多个 class。此外，

v-bind:class

指令也可以与普通的 class attribute 共存。

 <!  DOCTYPE html  > 
 <  html  > 
 <  head  > 
 <  meta  charset  ="utf-8"  > 
 <  title  ></  title  > 
 <  script  src  ="vue.js"  type  ="text/javascript"  charset  ="utf-8"  ></  script  > 
 </  head  > 
 <  body  > 
 <  div  id  ="app"  > 
     <  div  class  ="test"  v-bind:class  ="{ active: isActive }"  style  ="width:200px; height:200px; text-align:center; line-height:200px;"  >  hi vue  </  div  >  >  </  div  > 
 <  script  type  ="text/javascript"  > 
 var  vm  =   new  Vue({  //  定义一个Vue的实例的变量 
 el   :  "  #app  "  ,

    data : {

        isActive :  true  }

});  </  script  > 
 <  style  >  .test  {  font-size  :  50px  ;  }  .active  {  background  :  #FF0000  ;  } 
 </  style  >  >  </  body  > 
 </  html  >

 <!  DOCTYPE html  > 

 <  html  > 

 <  head  > 

 <  meta  charset  ="utf-8"  > 

 <  title  ></  title  > 

 <  script  src  ="vue.js"  type  ="text/javascript"  charset  ="utf-8"  ></  script  > 

 </  head  > 

 <  body  > 

 <  div  id  ="app"  > 

 <  div  class  ="test"  v-bind:class  ="{ active: isActive ,green : isGreen}"  style  ="width:200px; height:200px; text-align:center; line-height:200px;"  >  hi vue  </  div  >  >  </  div  > 

 <  script  type  ="text/javascript"  > 

 var  vm  =   new  Vue({  // 定义一个Vue的实例

标签: Javascript

序言

第1节安装与部署

采用直接用 <script> 引入

第2节创建第一个vue应用

第3节数据与方法

第4节生命周期

常用的生命周期钩子

其他的生命周期钩子

生命周期图示

第5节模板语法-插值

插值

文本

原始 HTML

Attribute

使用 JavaScript 表达式

算数运算

三元运算

函数运算

第6节模板语法-指令

参数

指令修饰符

第7节 class与style绑定

绑定 HTML Class

对象语法

添加新评论

最新文章

分类

最近回复

归档

其它

Vue官方学习笔记

序言

第1节 安装与部署

采用 直接用 <script> 引入

第2节 创建第一个vue应用

第3节 数据与方法

第4节 生命周期

常用的生命周期钩子

其他的生命周期钩子

生命周期图示

第5节 模板语法-插值

插值

文本

原始 HTML

Attribute

使用 JavaScript 表达式

算数运算

三元运算

函数运算

第6节 模板语法-指令

参数

指令修饰符

第7节 class与style绑定

绑定 HTML Class

对象语法

添加新评论

最新文章

分类

最近回复

归档

其它

第1节安装与部署

采用直接用 <script> 引入

第2节创建第一个vue应用

第3节数据与方法

第4节生命周期

第5节模板语法-插值

第6节模板语法-指令