vue学习笔记

资源来源：vue中文文档

本文绝大部分资料摘录自Vue官方文档，方便日后查阅。

Vue.js是什么

  Vue是一套用于构建用户界面的 渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅仅易于上手，还便于与第三方库或既有项目整合。

  Vue专注于渲染/更新非常简单的组件树的真实性能。组件的依赖是在渲染过程中自动追踪的。

  Vue整体思想：拥抱经典的Web技术，并在其上进行扩展。(看似贼深奥，其实就是说摈弃以往web技术的短板，吸纳好的方面，并站在巨人的肩膀上前行)

  Vue还贴心的提供了Vue-cli脚手架，方便我们快速地构建项目。

  只需一条demo即可立即体验Vue开发的乐趣。（当然前提是你阅读了官方文档 /调皮脸）

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

以上内容摘录自 Vue官方文档

附言：

  优点很多，但只有动手尝试过才能有真正体会，立即打开官方文档进行尝试吧~
（不得不感慨一下，Vue的官方文档做得是真的很友好）

创建一个Vue实例

所有的Vue组件都是Vue实例，并且接受相同的选项对象。

//数据与方法
//我们的数据对象
var data = { a: 1 }

//该对象被加入到一个Vue实例中
var vm = new Vue({
    data: data
})

//获取这个实例上的属性
//返回源数据中对应的字段
//alert(vm.a == data.a); => true

//设置属性也会影响到原始数据
//alert('vm.a: '+vm.a +'  --  data.a: '+data.a)

vm.a = 2;
//vm.a 与 data.a 都改变了（引用传递）
//alert('vm.a: '+vm.a +'  --  data.a: '+data.a)
data.a = 3;
//同样改变
//alert('vm.a: '+vm.a +'  --  data.a: '+data.a)

以上所有操作都会得到即时响应，但是如果插入的值，不是在一开始就声明好的（例如上面的 data.a 属性），则不支持及时响应。

实例：

//我们在控制台向 data对象 添加一个新属性
data.b = 'hi'

这样的操作不能得到及时响应

解决办法： 在创建时即声明好，在晚些时候会使用到的字段并赋初始值。

插值

以文本的方式插入

//当mes的值被改变时，所有存在mes引用的位置，都将被即时更新
<span>message: {{ mes }}</span>

//执行一次性地插值
<span v-once>这个将不会改变： {{ mes }}</span>

插入原始html

  双括号会将数据解释为普通文本，而不是html代码。输出html需要使用 v-html 指令

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

  感想：其实就是text()方法与html()地使用

使用JavaScript表达式

  Vue.js提供了完全地Javascript表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

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

  但每个绑定都只能包含单个表达式。

 <!--这是语句，不是表达式-->
 {{ var a = 1 }}
 <!-- 控制流也不会生效，可用三元表达式替代-->
 {{ if(ok){return message} }}

指令

  指令是带有 v- 前缀地特殊特性。它的预期是单个JavaScript表达式。职责是，当表达式地值改变时，将其产生的连带影响，响应式地作用于DOM。

  感想：和EL、JSTL的思想大同小异，表现形式不同而已。

参数

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

//例如用于响应式更新html
<a v-bind:href="url">...</a>

  上面的 href 参数，使得 v-bind 指令将 标签的 href 的 url 进行绑定，可以实现动态改变该标签的跳转地址。

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

  上面的指令 v-on 用于监听DOM事件。

缩写

  Vue.js给 v-bind 和 v-on 这两个最常用的指令，提供了特点简写。

v-bind 缩写

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

v-on 缩写

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

p.s：再次声明这不叫偷懒，这叫理性提高工作效率 /笑

计算属性

  在我们需要get元素属性之前，可以对这个属性进行操作，当我们拿到的就是经过特殊处理后的数据。

  由于是引用自源数据，所有当源数据被改变时，计算属性也会随之改变。（getter）

实例：

 <!--index.js-->
 var vm = new Vue({
    el: '#example',
    data: {
        message: 'hello 你好'
    },
    computed: {
        //计算属性的getter
        reversedMessage:function(){
            //this 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
})

<!--index.html-->

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Conputed reversed message: "{{ reversedMessage}}"</p>
</div>

结果：

 Original message: "hello 你好"

Conputed reversed message: "好你 olleh"

感想：可以看作是java中的字段封装，因为计算属性 同样存在 getter 与 setter 的表现形式。好玩的东西很多。

一点骚操作

new Vue({
    el: '#app',
    render: h => h(App)
})

等价于

new Vue({
    el: '#app',
    render: function(h){
        return h(App)
    }
})

-----------------
取反

var flag = true;
flag = ! falg;

按照官方文档一路打下来，觉得有些概念还是挺模糊的，后来配合视频教程一起进行学习，动手做个小项目下来基本的都能掌握。

纸上得来终觉浅，绝知此事要躬行。