引入方式:
1. CDN(CDN 服务器下载每次使用都要所以有点慢)
2. 下载和引入
3.NPM(webpack+CLI)
- 04
- // 创建实例然后变量接收
- new vue({
- })
- let xx=new Vue({
- .....
- })
- const xx=........
var 和 let 区别, JS 设计之前早期设计缺陷, var 没有变量作用域 (es6)
- ({
- ....
- }) // 对象
- ({
- el:'element',
- }) // 挂在要管理元素, 最好是标签 id
- ({
- data:{
- // 定义数据
- message:'xxxx'
- }
- })
new Vue 实例时 把 html 元素交给 Vue 管理 el, 既然管理了, Vue 就会解析 HTML 元素标签中的语法;
区别于原先的编程范式: 命令式编程 --> 声明式编程
在 JS 中的做法:(: 命令式编程 --> 第一步怎么做, 第二部怎么做, 一步一步来)
定义元素, 设置 id 属性
定义变量
将变量值放在之前定义元素中显示
##new Vue() -->// 这就是实例, 但你要传参所以要 {}
// 因为你要传的东西所以要以需求而定
- <div id="app">
- </div>
- script // 引入连接
- <script>
- let a = new Vue({
- el: '#app',
- data: {
- arr: ['....', '...', '...']
- }
- })
- </script>
列表指令
v-for="xx in xx"// 1. 放到哪里去 2. 从哪里拿
最大的好用之处是在于数据变多后不用在改结构 (完成 JS-DOM 中的拼接操作), 也不用在往结构里加数据 (数据改变页面跟着变), 自动添加, 叫数据驱动式编程
用处从服务器拿数据 (后端) 展示 HTML 页面中
05
计数器实现详情:
(串联以前知识点监听器 addeventlistener)
JS 操作 dom 拿到 buttom 按钮 -> 添加监听事件 -> 在拿到改变后的数据 -> 再去修改
命令式
v-on 绑定 : 事件 --->v-on:click
来源第 6 集, 参考 xmind 和笔记本 typora
响应式布局体现在方方面面, 1. 按钮绑定事件后 2. 每点击一次改变一次 data 值 3. 然后在加载给 counter
- methods:{
- add: // 类型
- }
- methods:{
- add:function(){
- xxxx
- }
- }
在这里对象代理 proxy 和 响应式有关, 或许有疑问 this 指代为什么 vue 怎么会知道我们要拿什么东西
- 06
- MVVM --> Model View ViewModel
就是说 ViewModel 等于 M V 或 V M 之前的桥梁帮助 他们之间实现通信 --> 当你有数据需要展示的时候 viewmodel 就会展示 到 view 视图里去 换之视图有改变时 也会通过 viewmodel 和 model 通信
1.data binding 到 DOM 实时显示 2.listener 监听 DOM 事件 并通过 methods 中操作 改变数据
还可以这么写:
8
vue options 选项
el 里面: string|HTMLElement // 决定 vue 实例后要管理的哪个 dom
- --->document.querySelector() // 如果你传字符串
- data:object|function // 组件当中 data 必须是函数 --> 放的都是数据
- methods:[key:string]:function
定义 vue 一些方法可以在其它地方使用
函数
- function(){
- ......
- }
方法
- function person(){
- . name: // 方法和实例挂钩 ----> 从一定程度说 var App = new Vue({
- }) 这是方法
- }
类
- function person(){
- ......
- }
- 08
vue 生命周期 (诞生到消亡的过曾)
new Vue() 对象诞生
10. https://www.jianshu.com/p/672e967e201c
添加到短语集
没有此单词集: 英语 -> 中文 (简体)...
创建新的单词集...
拷贝
添加到短语集
没有此单词集: 英语 -> 中文 (简体)...
创建新的单词集...
拷贝
添加到短语集
没有此单词集: 英语 -> 中文 (简体)...
创建新的单词集...
拷贝
添加到短语集
没有此单词集: 英语 -> 中文 (简体)...
创建新的单词集...
拷贝
添加到短语集
没有此单词集: 英语 -> 中文 (简体)...
创建新的单词集...
拷贝
来源: http://www.bubuko.com/infodetail-3297064.html