IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue 2.x 随笔 1-入门 -> 正文阅读

[JavaScript知识库]vue 2.x 随笔 1-入门

0. mvvm 模型

参考阮总博客,还就那个轻松愉快 …
阮一峰 MVC,MVP和MVVM的图示

1.computed

实现:相当于为该对象的protype声明了一个getter
缓存:计算属性依赖于响应式依赖进行(即渲染时重新计算)

2.watch

一个好的选择:通过监听状态来减少一个大函数的调用

3.prop

声明时候,注意’-'和驼峰风格的使用
可以声明一个对象封装所有property,然后直接赋值v-bind
注意单向数据流 & js引用传递 的影响
prop属性中可以设置类型验证、默认、自定义验证函数
有了 inheritAttrs: false 和 $attrs,你就可以手动决定这些 attribute 会被赋予哪个元素

4.Vue内置函数

全局均可以引用(即Vue.xxx()),可简写作$xxx()

4.1 $el

找到dom元素

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

4.2 $set

vue实例对象(官网写作’vm’)创建之后添加新的属性到实例上,它不会触发视图更新,因此直接使用data.xxx = xxx的赋值方式,并且该属性getter/setter没有被声明时候,这将导致vue的v-vm绑定失败,因此这样修改之后是无法动态响应到view的

vue响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter,如上示例,可以将data在控制台打印出来看

new Vue({
	data:(){
		return {
			queryParam:{},	//这么写,是一个空对象,该对象将自动声明存取器,但是内部属性未显式声明,将不具备存取器
			//queryParam:{time:'',}	//这么写,将自动具备存取器
			},
		};
	},
	mounted:function(){
		this.queryParam.time = xxx;	//这样是无法生效的,因为此时this.queryParam.time对象并没有getter/setter
		this.$set(this.queryParam,'time',xxx);
	},
});

4.3 $nextTick

当赋值数据时候,dom初始化完成。因此对未来更新后的视图进行操作可以使用这个

dom未初始化,常发生在vue生命周期钩子中

mounted()并不能保证所有的子组件全部完成挂载

new Vue({
	...
  mounted:function() {
    get: function () {
      this.$http.get('/api/article').then(function (res) {
        this.list = res.data.data.list
        // ref  list 引用了ul元素,我想把第一个li颜色变为红色
        this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
      })
    },
  }
})

5.vm的一些内置属性的加载顺序

见源码:

function initState (vm) {
        vm._watchers = [];
        var opts = vm.$options;
        if (opts.props) { initProps(vm, opts.props); }
        if (opts.methods) { initMethods(vm, opts.methods); }
        if (opts.data) {
            initData(vm);
        } else {
            observe(vm._data = {}, true /* asRootData */);
        }
        if (opts.computed) { initComputed(vm, opts.computed); }
        if (opts.watch && opts.watch !== nativeWatch) {
            initWatch(vm, opts.watch);
        }
    }
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-16 11:38:44  更:2021-08-16 11:39:58 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/26 17:33:59-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计