文章参考>>>>>> 官方文档 + 书籍:《Vue.js快速入门》,切记,得有HTML、JS、CSS的基本基础,总不能你一点都不懂,直接干框架吧。
目录
------------------------------------------------------------------------------------------------------------------------------
第一章
废话不多说,讲的就是前端的发展和现有框架以及vue的优势-----总结起来就一句话:,前端三大框架:
- Angular:发展最久,但学习难度最大,目前开始下坡趋势。
- React:难度相对于Angular下降不少,有新特性
- Vue:难度最低,目前最火,本系列讲的就是它。
上面的难度指入门难度,其他的暂不考虑,请不要钻牛角尖。
第二章
第一节知识点:声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统::
首先我们创建一个html文件,代码如图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Document</title>
</head>
<body>
<div id='app'>
{{show_my_text}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show_my_text: 'Vue.js is the best one page App!'
}
})
</script>
</body>
</html>
首先你需要注意Vue的开头大写,然后因为我们引用的是官方的最新Vue.js,里面有个坑:书中原文的代码是:
<div id='app'>
</div>
在浏览器运行你会发现:“Vue.js is the best one page App!”这句话跑哪去了???
书中代码赏析:[有钱记得购买支持作者一下]
Vue的框架模式是:MVVM>>>>>>Model-View-ModelView【传统的是MVC>>>>Model-View-Controller】
什么是MVC?
模型(Model),用于存储程序中使用到的数据;视图(View),用不同的表现形式来呈现数据;控制器(Controller),更新模型。
它由如下三部分组成:
- 模型(Model) -“数据模型”(Model)用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。 “模型”有对数据直接访问的权力。 “模型”不依赖“视图”和“控制器”,也就是说,模型不关心它会被如何显示或是如何被操作。
- 视图(View) - 视图层能够实现数据有目的的显示,通常是一个用户界面元素。在视图中一般没有程序上的逻辑。在 Web 应用程序中的 MVC,通常把显示动态数据的 html 页面称为视图。
- 控制器(Controller) - 处理和响应事件,通常是用户操作,并监控模型上的变化,然后去修改视图。
点这读懂:MVC与MVVM的区别
代码剖析
在我们这个例子中:
<div id='app'>
{{show_my_text}}
</div>
就是视图层-View,
new Vue({
el: '#app',
data: {
show_my_text: 'Vue.js is the best one page App!'
}
})
就是模型层/数据层-Model。
Vue对象解析
Vue对象里面有四个常用的属性:el、data、methods、components。
- el:声明vuejs管理的边界,类似于angular的ng-app,把数据绑定给谁。 上面的例子中将数据绑定给了#app。
- data:专门存储一些数据的属性,数据一定是对象格式。 上面的例子中将Vue.js is the best one page App!赋值给show_my_text。
- methods:专门放置我们的事件的方法
- components:创建组件
回到上面的例子el指定了#app,data存放了数据show_my_text,然后利用表达式{{}}将数据显示到页面。
可能有错觉的地方:
1.show_my_text并不是某个固定的字符串,不信你可以试试把show_my_text改成别的>>>>text_message、show_text等等,你会发现能够正常工作哦。
2.Vue所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 Console 控制台 (F12打开),修改 app.message 的值>>>app.show_my_text = '新消息啊',你将看到上例相应地更新成了>>>>>‘新消息啊’。
摘自:
1.https://www.cnblogs.com/zhengjialux/p/5871980.html
假如上面的都理解了的话,不妨先看看官方的这个示例:TodoMVC — Vue.js ,直接120 行代码丢给你们理解,我也没想到书上突然进度这么快,但是都很基础,自行阅读代码吧。
-------------------------------------------------------------------------------------------------------------------
扩充
声明式渲染除了上面的文本插值,我们还可以像这样来绑定元素特性:
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
鼠标悬停几秒钟查看此处动态绑定的提示信息!
这里我们看到的 v-bind
特性被称为指令。指令带有前缀 v-
,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title
特性和 Vue 实例的 message
属性保持一致”。
同样当你再次打开浏览器的 JavaScript 控制台,输入 app2.message = '新消息'
,就会再一次看到这个绑定了 title
特性的 HTML 已经进行了更新。
摘自:介绍 — Vue.js
第二节知识点:Vue也有条件循环哦?
将代码再一次扩充>>>>创建app3,如下:
<body>
<div id='app'>
{{show_my_text}}
</div>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<div id="app-3">
<p v-if="seen">现在你看到第三个Vue对象了</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show_my_text: '第一个Vue对象!'
}
})
var app2 =new Vue({
el: '#app-2',
data: {
message: '第二个Vue对象>>>>>页面加载中' + new Date().toLocaleDateString()
}
})
var app3 =new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
</body>
结果如图>>其中seen也不是固定的,我试了改成:show_status照旧显示,因此>>推测可能data里面的仅仅只是个字典的key?
既然拥有if的话,应该还有for啦。
v-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: '第四个Vue对象' }
]
}
})
结果图:
我们依旧可以在Console上编辑它:
图一是输入app4.todos.pop()
,图二是输入 app4.todos.push({ text: '新项目' })。【出栈和入栈】
第三节知识点:按钮与方法
在这里我们创建了一个按钮用于进行交互,我们可以用 v-on
指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:
为了便于阅读,将之前的代码收缩>>>
效果图;
第四节知识点:输入框与标签内容绑定
代码+效果图:
Vue 提供的 v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定,因此标签p和输入框内容都是message,当输入框内容为空,也就是标签p的内容木有了时标签会自动隐藏起来。
第五节知识点:组件化应用构建
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树,在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
在一个大型应用中,有必要将整个应用程序划分为组件,以使开发更易管理。在后续教程中我们将详述组件,不过这里有一个 (假想的) 例子,以展示使用了组件的应用模板是什么样的:
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
与自定义元素的关系
你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is
特性。但是,还是有几个关键差别:
-
Web Components 规范已经完成并通过,但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下,Vue 组件不需要任何 polyfill,并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。
-
Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流、自定义事件通信以及构建工具集成。
虽然 Vue 内部没有使用自定义元素,不过在应用使用自定义元素、或以自定义元素形式发布时,依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。