Vue

Vue安装

1.安装的方式可以通过直接导入src

// 这是开发环境,有帮助的命令行警告
<script     src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// 这是生产环境 优化了速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

runtime.js(非完整版) 和 vue.js(完整版)的区别

2.根据vue文档,我们还可以看到区分不同构建版本,我们会对runtime和完整版区别进行简单的描述:

首先完整版的vue可以从html中直接获取视图,在html中直接可以使用{{value}}模板字符串,但是非完整版却不支持,非完整版没有compiler(用来将模板字符串编译成为 JavaScript 渲染函数的代码。)功能
非完整版运行时版本相比完整版体积要小大约 30%，非完整版在渲染时需要这样添加到html中
通过cdn引入时,引入的代码也不同

https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js // 完整版
https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.runtime.common.js // 非完整版

new Vue({
	render(h){
		return h('div',[this.n, h('button',{on:{click: this.add}})])
	},
	data: {
		n: 0
	}
})

以上的代码是非完整版实现传入数据的方法,h是尤雨溪写好传给render的

Vue/cli

vue/cli安装

yarn global add @vue/cli // 安装脚手架的命令
vue --version // 查看脚手架的版本
vue create '名字' // 创建一个Vue

选择一个配置,第一个是默认的,第二个是自己选择配置

选择自己需要的内容. 空格选择使用哪种css的版本

使用哪种eslint 代码编辑限制

什么时候判断eslint错误

配置文件分开放还是一起放在package.json

yarn server // 开启dev-server 进行实时预览

声明式渲染

1.直接渲染

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

new Vue({
  el: '#app', // 挂载到id为app上的节点
  data: {
    message: '页面加载于 ' + new Date().toLocaleString() // 动态的绑定了信息
  }
})

这里就是通过v-bind 动态的绑定了数据,message的数据是实时变动的,当页面刷新后将会跟着做变动

2.条件与循环

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

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

这里是通过v-if来控制p的显示和隐藏,当v-if="true时将会显示,当为false时将会隐藏

3.for循环渲染

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

这里v-for会进行遍历.语法就是v-for='item in items',item获取到的是每个数组的内容,然后会添加li,自动加上item.text的值

4.处理用户输入

<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('')
    }
  }
})

在vue中,可以通过v-on:方法='函数',来给当前节点绑定事件,在该例子中绑定了点击事件,然后调用了reverseMessage函数,函数一般都需要卸载methods内

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

v-model是双向绑定,在input中绑定v-model='对应的data'即可完成双向绑定,当input内容改变后,message的数据也会改变

数据响应式

set/get

数据响应式,其实就是指当数据发生变化时,页面的内容同时也会发生变化.在Vue中的使用了ES6中的新方法getter/setter,在此我们先简单的介绍一下getter和setter
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

var o = {}; // 创建一个新对象
var bValue = 38;
Object.defineProperty(o, "b", {
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
});
o.b; // 38

这上面在o对象中添加了一个b为虚拟属性,这里可以直接通过get获取b的值,不需要再调用函数,同时也可以通过set直接设置b的值.

vue应用Object.defineProperty

Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。并没每一个属性都绑定了watch函数,只要当数据发生变化时,就会重新渲染界面. 但是通过Object.defineProperty会有BUG,由于 Object.defineProperty(o,'s',{})时必须要有一个s才能进行监听.现在可能会出现以下的两种情况

若未在data内写s,则会报错
data内的属性为一个对象时,若未在第一层写要被监听的内容,即使后续通过点击事件等在对象内添加也不会再次渲染出现解决方法
在一开始的时候就先为要设置的属性设置一个初始值(null/undefined)
使用Vue.set(this.o, 's', 1) 设置一个初始值,为1

总结

本篇文章为大家讲述了如何引入vue,同时一些vue/cli 脚手架的基本操作,通过脚手架会很大的方便我们的vue项目进行初始化,但是若有更多高级的需求还是需要我们自己通过webpack进行配置,同时介绍了一些简单的v-指令,最重要的是vue实现数据响应式的方案,主要是通过Object.defineProperty实现的,希望该篇文章对大家有所帮助.
记得持续学习,不断跟进!加油!

Vue初体验

Vue