#一课一得#
目录
一、对vue.js的了解
1.什么是vue.js
Vue 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。
Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。
2.框架特点
易用
在有HTML，CSS，JavaScript的基础上，快速上手。
Vue.js的API是参考了AngularJS、Knockout、Ractive.js、Rivets.js。
Vue.js的API的对于其他框架的参考不仅是参考，其中也包含了许多Vue.js的独特功能。
灵活
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用
3.vue.js的安装
开发版本：
包含完整的警告和调试模式：https://cn.vuejs.org/js/vue
删除了警告， 30.96KB min+gzip：https://cn.vuejs.org/js/vue.min.js
CDN：
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
4.创建一个Vue程序
创建一个Vue程序的方法：
创建一个HTML文件：
引入Vue.js：
创建一个Vue实例：
将数据绑定到页面元素：
完整的HTML：
二、对指令的了解
什么是指令
专门在HTML中也能实现分支、循环等程序功能的特殊的自定义属性
常用的11种指令：
这里着重讲一下我比较了解的v-bind、v-show、v-if 和 v-else
v-bind
(1). 问题: 如果希望元素的属性值也随程序自动变化，如果使用{{}}，会报错！——{{}}只支持元素内容变化，不支持属性值变化
(2). 解决: 今后只要希望元素的属性值随程序自动变化，都要用v-bind或:代替{{}}
(3). 如何:
a. 标准写法: <元素 v-bind:属性名=“变量或js表达式”>
b. 简写: <元素 :属性名=“变量或js表达式”>
(4). 结果: 当开局, new Vue()只要扫描到:属性名=“变量或js表达式"语法，都会先执行”“中的变量或js表达式，获得一个结果值。然后，再自动将结果值，设置为当前属性的属性值！
(5). 强调: 绑定属性值时，不要加{{}}了！一旦一个属性前加了:，则=后的”"，其实就起到了{{}}等效的作用！
(6). 示例: 根据pm25的数值，动态显示不同表情图片
2. v-show
(1). 什么是: 专门控制一个元素显示隐藏的特殊指令
(2). 何时: 今后只要想控制一个元素显示隐藏都用v-show
(3). 如何: <元素 v-show=“bool类型变量或js表达式”>
(4). 结果: 每当new Vue()扫描到v-show时，都会先计算""中的变量值或js表达式的值:
a. 如果=右边的变量值或表达式结果为true，则当前元素什么也不做，默认正常显示
b. 如果=右边的变量值或表达式结果为false，则new Vue()自动给当前元素加上display:none，当前元素隐藏
(5). 示例: 实现打开关闭对话框
3.v-if——v-else
这里我就直接放示例了: 切换用户登录和注销状态
这便是我至今学到vue.js的内容
1333
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
