Vue01笔记
- ES6模块使用和新的函数声明方式
a) Import 一定不能放在函数内, 建议放在上方
b) Export 除了声明式的以外, 尽量放在代码的下方
- Import {name,age} form ‘./xxx.js’
- 今日重点
a) Webpack-dev-server
b) 是一个服务器, 每次启动会分配意义端口, 类似与sublime server的一个工具
- 自动刷新inline
- 热加载 热替换 hot 完全没有刷新的操作
- Open 自动打开默认浏览器
也可以结合 package.json文件中的script属性, 如果不记得, 执行的命令建议都是npm run脚本npm run 不能解决../操作 所以要用yarn (yarn run test)
- 在运行中 --> 加载 在运行中 ----> 替换
1. 安装 npm i webpack-dev-server -D
2. 使用命令 ./或者是 ../node_mudules/.bin/webpack-dev-sever --inline --hot --open
Webpack里面的坑: 如果启动的目录所有上级文件夹名称包含{} [] , 自动刷新和热加载 替换功能失效, 不要在文件夹上加入特殊符号
Vue
- 历史背景
- Vue特点
a) 双向数据绑定 --> 数据劫持 --> 操作虚拟DOM
- Div p 对于这样的结构操作元素性能比较差,
- domOBJ = {children : {name:’div’ , children:{name:p}}} 通过sett的触发, 修改完虚拟的DOM树, 一次性更新html元素内容innerHTML
- Vue实例的相关属性 (渐进式框架)
b) 用途 : 渐进视第一章(作为库使用的基本操作) --双向数据绑定功能
解决闪烁问题 v-bind v-cloak
引入包以后, 内部提供了一个vue对象
<div id=’app’>
<p v-cloak>{{msg}}</p> //双向数据绑定
<input typ=”text” name=”” v-bind: value=”msg”> //单向数据绑定
<input typ=”text” name=”” v-model=”msg”> //双向数据绑定
</div>
//引入包之后, 内部有一个vue对象
Var vm = new Vue({
el:’#app’, //跟页面上的id名是对应的 指定你要被控制的模板元素, 此时所有的操作可以在其内部发生影响
Data: { //在前端引包的
msg:’hello vue’ //相当于innerH
}
Template{ //可以传递一个字符串模板, 其中可以包含插值表达式{{xxx}} , 如果你当前给了template, 那么原来的元素将会被替换
}
})
Var msg = ‘124’; //数据劫持, 当vm原型上的属性发生了改变,此时
b) 搭建一个单文件vue项目
- 单文件vue, 是一个一个的.vue文件组成的
- 保证当前的webpack.config.js这个文件所在的上级或者上上级能够找到node_module/.bin/webpaack-dev-server.cmd这个文件, 接下来就可以按照这个路径去执行该文件, 不需要后缀名, 给上参数
- Webpack.config.js文件中加入loader
- webpack上面的配置,
- 安装依赖包
- 首先在html代码中加入 div id=”app”
- 进入到main.js中, 做你要做的事, 构建一个vue对象的实例, 并且指定render让其渲染
- 引入vue对象 , 引入app.vue, 将其完成初始化, 指定控制节点元素 el
- 创建app.vue文件, 特点一: 顺序 template --> script --> style 都是标签, template中只要保证存在一个根节点, vue可以有多个跟节点, 必须是这个样子, script 内部需要导出一个对象 export default{} , data必须是一个函数, 该函数的返回值必须是一个对象, 这个对象的时候, 可以在当前app.vue的templa中使用
new Vue({
el: ‘#app’, //不建议el指定为html / body
data(){ //这里的data必须是一个函数, 返回值必须是一个对象 ,data () ES6函数声明的方式
return{} //声明了一个数据对象, 没有通过template这样的属性提示, 而是直接通过render渲染另一个单文件vue
},
render:function(creater) {return creater(app)}
//简洁版 render:c => c(app)
//声明了一个数据对象,
})
//第一部分
<template> //模板的位置, nebulizer是html内容和vue的一些变量的使用 {{xxx}}
<div class = “tmpl” > {{}}</div>
</template>
//第二部分
<script> //这个组件对象需要向外暴露
export dafault{ //向外暴露的
data{
return{ xx:’aaa’}
}
}
</script>
//第三部分
<style> //写css </style>
小结 : 入口 html -> 加入div标签加入id -> 不建议el指定为html / body 标签
Vue 常用指令
v-cloak 先让当前的隐藏掉, 解决闪烁问题
v-text 显示文本内容
v-if 元素是否隐藏 true/false , 是false代表没有
v-show 元素在页面中隐藏改变元素的style true/false只是将display: none,
v-model 双向数据绑定
v-bind 绑定一个属性 v-bind: 属性=”值”, 也可以操作data上的属性, 简写: + : 属性 = ‘值’
v-html 绑定的属性可以html里的标签
v-class ,灵活配置, 需要结合v-bind来完成,
v-for的使用
数组的for v-for=’(item ,index)in list’; (值,索引)
对象的for v-for=’(item ,key,index)in obj’; (值,键,索引), 如果给v-for绑定一 个key, v-for=”(item,index) in person”:key=”item.id”那么会让其在增加或者删除元素的时候, vue需要根据特定算法计算该对象的唯一标识, 而是直接用你指定的这个,提升性能
子组件使用
Components属性
当前组件和data属性是同一级的地方加上一个components属性, 其内部是一个对象, 可以有多个属性, 如果你属性名和属性的值, 用同一个的话, 可以简写 {componet1,componet2}, 组件建议使用首字母大写, 在js中如果你需要使用这个组件的 时候, 毫无疑问, 先__导入子组件__, 对于标签名, 开头的大写字母可以直接小写, 中间的大写字母可以加上-再小写
父向子组件传值
如果需要向子组件传值, 非常简单, 会有自己的$parent属性, 每 个组件对象如果有的情况下, 也会有自己的$children属性, 同名都是VueComponent对象
发射器
$on 当某个VueComponent对象调用 $on(‘eventName’,callback(msg){msg;})
$emit 上面那个函数在该对象调用的时候$emit的时候触发, 触发多次 this.$parent.$emit('eventName','haha');
$once 和on一样, 但是该事件的回调函数只会被触发一次
选项/什么周期钩子
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义。
Created
实例已经创建完成之后被调用, 在这一步, 实例已经完成以下的配置: 数据观测, 属性和方法的运算, watch/event事件回调, 然而挂载属性还没开始, $el属性目前不可见
Prop
组件的实例作用域是孤立的, 这意味着不能在子组件的模板内直接引用父组件的数据, 要让子组件使用父组件的数据, 我们需要通过子组件的props选项, 也可以向他传入一个字符串 <child message="hello!"></child> 最后输出 hello