学习过程中突发奇想

• 程序语言都是处理0和1 肯定很多地方是一样的,那么肯定有书教你怎么写程序
• 学习编程的第一要素是要语文好,语文好理解能力,看文档才能懂
• vue模板什么意思?
  //HTML 模板应该指的是原生HTML，通过 el 挂载到 Vue 实例上。如在 DOM-模版解析说明 章节提到的 HTML 模板解析的一些限制
  <table>
  <my-row>...</my-row>
  </table>
  //字符串模板,即JavaScript内联模版字符串
  Vue.component('my-component', {
  template: '<div>A custom component!</div>'
  })
• 根据上面的知识点启发,貌似运行环境遇到不认识的语法,都默认把代码当成字符串
• 镜像就是副本的意思,因为国内有墙,所以用npm下载东西有时候会太慢甚至挂掉,所以有的大公司会镜像也就是copy一模一样常用的框架和库提供给国内互联网开发者

安装

• 目前最稳定2.5.16版本/直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
  //感觉和之前学的jQuery一样,利用命名空间把所有东西封装进一个全局变量里面,源码应该return一个对象出来让我们使用,直接Vue.XXXX
• 在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
• Vue有两个版本下载,开发和生产
• Vue 提供了配套工具来开发单文件组件
• Vue 提供一个官方命令行工具，(cli)
  //可快速搭建大型单页应用。
  //该工具为现代化的前端开发工作流提供了开箱即用的构建配置。
  //只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目
  //vue与Cli的关系应该和git 与gitbash的关系类似

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

• 官方说通读vue指南文档之后再用cli
• 不同的构建版本应该就是不同版本的vue的意思....
  //也就是说vue团队不断优化自己的代码,可能会导致个别API的使用方法改变

Vue术语

• 完整版
  //Vue的完整版本,包括编译器和运行时的版本
• 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  //编译器是代码,是将模板字符串编译成JavaScript渲染函数的代码,因为vue是写在html 和 JavaScript上面的,vue的语法是不符合JavaScript和html语法的,所以需要编译器来把Vue代码翻译成符合html,JavaScript代码,这样浏览器才能理解,并且操作页面
• 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
  //就是区别于编译器的Vue代码,因为编译器是内置在vue这个框架代码内的,用户是不用操作的,用户操作的vue代码都是运行时
  //简单来说,vue代码就是运行时,编译器就是翻译vue代码的用JavaScript写的一个库(一般来说是函数)
• UMD(vue的UMD版本)
  UMD 版本可以通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。
  //也就是说UMD有完整版和不完整版,他的特点在于可以直接通过script标签引入
• 除了UMD还有commonJS,ESmodule 一共三个版本的vue,前者兼容webpack1.0后者兼容webpack2.0

纠正上面的一些理解

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

• vue有组件,运用组件要把定义标签写在html上面,那么就需要编译器了,因为html页面不认识JavaScript代码啊,因为vue是用JavaScript写的嘛
• 运行时,就是指的是不涉及html页面上的vue代码,都叫运行时,因为不涉及html就不需要编译啊...
• 因为浏览器只认识.js.css这些后缀的文件,所以你用到vue也是要编译成JavaScript代码浏览器才能理解,才能渲染页面,webpack这种打包工具就是将各种前端开发中遇到的难题打包处理的工具,不要太爽啊

vue介绍

• 渐进式代表的含义是：也就是主张少,只关注视图层，便于与第三方库或既有项目整合。https://www.zhihu.com/question/51907207
  - 观看官方视频的时候有些疑惑
  1.它说这几年页面的代码大量地从后端搬到了前端,前端代码也是服务器响应给浏览器的啊!!!肯定也是保存在后端服务器上啊...奇怪了怎么说搬到前端?难道是说渲染页面的工作由后端转移到了前端的意思?

vue介绍视频

• 视频里说,因为前端的发展,大量JavaScript代码由后端搬到了前端(估计是在浏览器运行JavaScript代码的意思),可是一个大项目JavaScript代码成千上万啊,所以会很乱,框架就是整理这些代码,管理代码的工具
  //这也印证了前端代码这几年的模块化之路
• 视频里面说:如果你有一个现成的服务端应用,可以把vue当做应用中的一部分嵌入其中,带来更丰富的交互体验
• vue也可以帮你把更多的业务逻辑代码放到前端来,如果用了vue生态的话
• vue允许你将一个页面分割成多个可以复用的组件,每个组件都包含了自身的html/css/JavaScript来渲染页面响应的地府
  //父组件APP因为足够大,所以能渲染整个页面,子组件和孙组件比较小,可以引入APP中,供APP使用,积小成多最后撑起整个页面,整个页面都是VUE组件渲染的了
• vue的特点:
  //响应式双向绑定,在vue实例中的data数据,只要更改都会自动刷新,因为双向绑定,这是vue来做的,换言之再也不用操作jQuery了
  //当然data数据,不仅仅是显示字符串那么简单,也可以是复杂的类型,前提是你要在vue实例里面的data属性,那里先声明注册
  //貌似data必须是数组或者对象或者字符串,不能是函数
  //其中还可以用create这个API引入外部数据库的数据

create(){
  fetch('https://XXXX')
      .then(response=>response.json())
      .then(json=>{
    this.products = json.products
  })
}

• 构建工具
  //构建工具，我往往会在前面加「自动化」三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的。
• 安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
  //这是官方原话

Vue介绍

• 声明式渲染
  //vue.js的核心是一个系统,一个将数据渲染进dom,的系统(可以用模板语法来声明式操作)
  //dom是一个JavaScript对象,一个根据html结构产生了相应节点(可操作的JavaScript对象)的对象,这个对象封装了很多可以操作这些节点对象的函数(方法),可以说页面的展示离不开dom,dom可以操作html,可以修改html节点,文本,样式,所以Vue要把页面的数据交给dom,由dom来渲染页面
  //不仅如此,Vue还做到了极致,因为DOM是根据DOM渲染树来渲染页面的,而页面的代码加载是有顺序的,而且加载到哪里,页面就渲染到哪里;Vue不是直接交数据给DOM,而是先交给虚拟DOM,让虚拟DOM计算最终样式,才把最终样式交给真的DOM来渲染页面
  //所以Dom有文本和特性这些概念,dom文本实际上就是某个标签里面的文本内容,dom特性其实就是某个节点的特性,或者说是某个html标签的特性
  //没有vue的时候,我们用jQuery来做特效,需要用命令式的代码来操作DOM;现vue帮你操作dom,不用亲自写dom相关的代码,但是vue又不会干预你想亲自操作dom,这就是Vue声明式代码的好处
• v-for 指令可以绑定数组的数据来渲染
  //很明显,用v-for的数据必须是一个数组,而且还可以亲自操作 app4.todos.push({ text: '新项目' })，在列表最后添加了一个新项目。
• 模板是将一个事物的结构规律予以固定化、标准化的成果，它体现的是结构形式的标准化,简单来说就是一种格式
• Vue应用的意思就是一个页面,对应SPA单页面应用,也就是说一个页面就是一个应用
• 注意只有v-Module的数据才是双向绑定,其他只算是响应式,这里面是有区别的

组件化应用构建

• 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
• 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
  //组件就是一个vue实例,一个拥有预定义选项的vue实例,使用组件必须在vue注册
• 终于搞清楚了,模板指的是组件模板,和组件相关的vue语法 就是模板语法,不管在html页面里还是JavaScript页面里,只要和组件模板相关的语法都是模板语法

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

现在你可以用它构建另一个组件模板：
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

总结

• Vue的实例就是开发SPA中的单页面应用,当然也可以是多页面应用,简单来说就是Vue实例绑定一个页面的body,页面变成了一个Vue实例
• 根据Vue官方视频的说法,webapp是由多个组件组成的,所以Vue实例这个页面应用也有很多组件组成的,用法就是Vue.component来注册,然后在页面上写上组件的模板就行了
• 其中vue的实例(当前页面app)的data就用来存总数据的,它可以给子组件使用,而子组件(vue.compenent声明的所有子组件都可以用props这个属性来接受父组件传的数据,)
  //也可以说props是子组件的data,只不过这是父亲那边传过来的
• 最后如果想使用父亲的data 方法是在组件模板中, 用模板指令来建立桥梁 让子组件的props和父组件的data变量产生关联