vue框架-大纲-知识要点 Vue学习 _vue

VUE 一. 开发工具
? VUE开发环境推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下：
二. 第一个VUE程序 2.1 引入js

2.2 给dom元素定义id
{{msg}}
2.3 vue代码编写
new Vue({el: "#app",data() {return {msg: "Hello World"}}});
二. 基本指令
【vue框架-大纲-知识要点Vue学习】v-text: v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}, 即插值表达式。
v-html: 将内容以html的形式呈现在页面。
v-model: 双向数据绑定。
v-if: 值如果为true的情况下，显示标签，如果为false会移除标签。
v-else-if: 与v-if配合使用。
v-else: 与v-if配合使用。
v-show: 如果为true,显示信息，如果为false则隐藏标签。
v-for: 循环遍历。语法形式为 v-for=“item in list”
v-bind: 将值绑定到标签的自定义属性上，形式为 v-bind:title=“”，可以简写为 :属性名
v-on:click: 点击事件，可以简写为@click 。
如下代码为v-bind的演示：
.cls{color: red;}.cls1{font-size: 30px;}.cls2{line-height: 40px;}这是一段话这是一段话这是一段话
案例：1. 通过表单添加数据，渲染到列表中。

文章插图
? 2. 遍历数组和对象，并能删除和更新。
三. 计算属性与监视器 3.1 计算属性
? 计算属性是用来存储数据，而且数据可以进行逻辑操作，是基于其依赖的进行更新，只有在相关依赖发生变化的时候才会更新变化，计算属性是缓存的，只要相关依赖不发生变化，多次访问属性值是之前I计算得到的值，并不会多次执行。计算属性的属性名不需要纳入到Vue的数据对象中。
3.2 监视器
? 所谓的监视器就是可以通过watch的方式观察某个属性的变化，然后做出相应的处理。
3.3 案例

FirstName: 
LastName: 
FullName1(单向): 
FullName2(单向): 
FullName3(双向):

对应的js代码如下：

案例二：串联过滤器，将数字四舍五入成两位有效数字，然后转换为美元表达方式

{{price | fix(2) | toUSD}}

5.2 局部过滤器
? 局部过滤器是定义在Vue实例中，只能在指定的实例中才能使用。
案例：我们创建博客的时候，都会有文章列表，每篇博客将会有一个文章摘要，然后提供一个“”的功能。我们这个示例就是来创建一个名为的过滤器，它将把字符串的长度限制为给定的字符数，并将其附加到你的选择的后缀中。

{{article | articleDisplay(20, '...')}}

练习：定义日期转换的过滤器。
六. vue-cli构建项目与打包部署
? 使用vue-cli能够快速的帮助我们构建项目，它就如同一个脚手架，提供了可选的模板。在使用vue-cli之前需要先安装。
6.1 使用npm构建项目

npm install -g @vue/cli#安装vue-cli,该步骤需要等一段时间vue -V#查看vue-cli的版本vue create my-app#创建名为my-app的项目

6.2 项目的结构介绍6.3 项目的打包部署
执行命令：
npm run build
将生成的dist目录下的文件放入到或者nginx下，启动服务器，即可访问。
七. 组件化开发
? 组件化开发是在ES6中提出的，可以提高页面的复用率，提高开发效率，便于团队协作，是一套模板化的代码，要有、