偏前端-vue.js学习之路初级（一）概念

首先--不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

新建一个html,引入一下js:

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>



一、文本申明式渲染

html:
1 <div id="app">
2   {{ message }}
3 </div>

js:
1 var app = new Vue({
2   el: '#app',
3   data: {
4     message: 'Hello Vue!'
5   }
6 })

el：

简单的理解为选中 id 为 app 的div，（提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。）

data:

　　文档一：1.类型可以是 object 或者 function

　　　　　　2.组件的定义只接受 function

　　分析一：首先，data的类型可以是Object

new Vue({
   el:'app',
   data:{
     newTodoText:'',
     visitCount:0,
     zhen:false,
     todos:[],
     error:null
   }
})

分析二：组件（component）里的定义的data必须是方法类型

Vue.component('myComponent',{
   props:[],
   data:function(){
          return{
              newTodoText:'',
              visitCount:0,
              zhen:false,
              todos:[],
              error:null
        }
    }
})

　　文档二：Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。

　　分析二：在上图的实例中，app的data对象中有五个属性，分别是：


     newTodoText:'',
     visitCount:0,
     zhen:false,
     todos:[],
     error:null

分析二：Vue会把这五个属性转化为getter和setter来控制访问对象app的属性，以第一个属性newTodoText为例设置了getter和setter：

const Vue = {

     _newTodoText:'',

     /***************/
    get newTodoText(){
        return this._newTodoText;

},

    set newTodoText(value){
        this._newTodoText = value;

},

    /****************/
}

　　文档三：实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

　　　　　　以 _ 或 $ 开头的属性不会被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

　　分析三：这个好理解，就是你可以在data中可以定义属性时在属性名开头加上下划线“_”或者美元符号“$”，就不可以直接访问，

<body>
　　　　<div id="app">
　　　　{{first}}
　　　　{{_first}}

　　　　</div>
<script>

new Vue({
   el:'app',
   data:{
     first:'ok',
     _first:'nope',
   }
})
//这里会报错，下面才是正解

分析三：

//这里才是正确姿势！！
<body>
　　　　<div id="app">
　　　　{{first}}
　　　　{{$data._first}}

　　　　</div>
<script>

new Vue({
   el:'app',
   data:{
     first:'ok',
     _first:'nope',
   }
})

　　文档四：当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函　数，从而返回初始数据的一个全新副本数据对象。

如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

　　分析四：这就是分析一要解决的问题了，为什么组件（component）里的定义的data必须是方法类型，原因就是在此，在工程中，每个组件都有可能用来被创建多个实例，而这个组件的实例他们的属性是不能共用的！意思是组件A的属性改变不能引起组件B的同一属性改变，结合原型链知识很容易就能想清楚

除了文本插值，我们还可以像这样来绑定元素特性：v-bind 特性被称为指令。指令带有前缀 v-

1 <div id="app-2">
2   <span v-bind:title="message">
3     鼠标悬停几秒钟查看此处动态绑定的提示信息！
4   </span>
5 </div>

1 var app2 = new Vue({
2   el: '#app-2',
3   data: {
4     message: '页面加载于 ' + new Date().toLocaleString()
5   }
6 })

二、条件与循环

1.条件判断使用 v-if 指令：可以用 v-else 指令给 v-if 添加一个 "else" 块：

 1 //随机生成一个数字，判断是否大于0.5，然后输出对应信息：
 2 <div id="app">
 3     <div v-if="Math.random() > 0.5">
 4       Sorry
 5     </div>
 6     <div v-else>
 7       Not sorry
 8     </div>
 9 </div>
10
11 <script>
12 new Vue({
13   el: '#app'
14 })
15 </script>

2.v-else-if　　

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

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

3.v-show

　　v-show 指令来根据条件展示元素：

 1 <div id="app">
 2     <h1 v-show="ok">Hello!</h1>
 3 </div>
 4
 5 <script>
 6 new Vue({
 7   el: '#app',
 8   data: {
 9     ok: true
10   }
11 })
12 </script>

4.v-if与v-show的区别：

　　在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。

　　v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

　　v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

　　相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

　　一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

5.循环使用 v-for 指令。

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

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

 1 <div id="app">
 2   <ol>
 3     <li v-for="site in sites">
 4       {{ site.name }}
 5     </li>
 6   </ol>
 7 </div>
 8
 9 <script>
10 new Vue({
11   el: '#app',
12   data: {
13     sites: [
14       { name: 'Runoob' },
15       { name: 'Google' },
16       { name: 'Taobao' }
17     ]
18   }
19 })
20 </script>

模板中使用 v-for：根据sites数组内容循环展示模板里的 li 标签

1 <ul> 2 <template v-for="site in sites"> 3 <li>{{ site.name }}</li> 4 <li>--------------</li> 5 </template> 6 </ul>

5.1 v-for 迭代对象

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

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

也可以提供第二个的参数为键名：

1 <li v-for="(value, key) in object"> 2 {{ key }} : {{ value }} 3 </li>

第三个参数为索引：

1 <li v-for="(value, key, index) in object"> 2 {{ index }}. {{ key }} : {{ value }} 3 </li>

不仅如此，在迭代属性输出的之前，v-for会对属性进行升序排序输出：

 1 <div id="app">
 2 <ul>
 3     <li v-for="n in object">
 4      {{ n }}
 5     </li>
 6   </ul>
 7 </div>
 8
 9 new Vue({
10   el: '#app',
11   data: {
12     object: {
13       2: '第三',
14       0: '第一',
15       1: '第二'
16     }
17   }
18 })

5.2 v-for 迭代整数

v-for 也可以循环整数

1 <li v-for="n in 10"> 2 {{ n }} 3 </li> 4 //从1展示到10

5.3 v-for 循环数组

1 <li v-for="n in [1,3,5]"> 2 {{ n }} 3 </li> 4 //展示1/3/5

三、处理用户输入

1.v-on指令绑定事件监听

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

2.v-model（它能轻松实现表单输入和应用状态之间的双向绑定。）

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

四、组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用.

组件化构建，需要理解的还是比较多的，这里单独写一篇方便学习 vue.js 组件化构建

睿舞霓裳

偏前端-vue.js学习之路初级（一）概念