学习过程中突发奇想
- 程序语言都是处理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变量产生关联
