vue 基础笔记

Posted 2020-09-07 何必再忆

Vue01笔记

1. ES6模块使用和新的函数声明方式

a) Import 一定不能放在函数内, 建议放在上方

b) Export 除了声明式的以外, 尽量放在代码的下方

1. Import {name,age} form ‘./xxx.js’
4. 今日重点

a) Webpack-dev-server

b) 是一个服务器, 每次启动会分配意义端口, 类似与sublime server的一个工具

1. 自动刷新inline
2. 热加载   热替换 hot 完全没有刷新的操作
3. Open  自动打开默认浏览器

也可以结合 package.json文件中的script属性, 如果不记得,  执行的命令建议都是npm run脚本npm run 不能解决../操作  所以要用yarn (yarn run test)

 

1. 在运行中 --> 加载 在运行中 ----> 替换  

   1. 安装  npm i webpack-dev-server -D

2. 使用命令 ./或者是 ../node_mudules/.bin/webpack-dev-sever --inline --hot --open

 

Webpack里面的坑: 如果启动的目录所有上级文件夹名称包含{} [] , 自动刷新和热加载 替换功能失效, 不要在文件夹上加入特殊符号

 

Vue

1. 历史背景

 

1. Vue特点

　　　　a) 双向数据绑定 --> 数据劫持 --> 操作虚拟DOM

1. 1. Div p 对于这样的结构操作元素性能比较差,
   2. domOBJ = {children : {name:’div’ , children:{name:p}}} 通过sett的触发, 修改完虚拟的DOM树, 一次性更新html元素内容innerHTML
2. 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项目

1. 1. 　　单文件vue, 是一个一个的.vue文件组成的
   2. 　　保证当前的webpack.config.js这个文件所在的上级或者上上级能够找到node_module/.bin/webpaack-dev-server.cmd这个文件, 接下来就可以按照这个路径去执行该文件, 不需要后缀名, 给上参数
   3. Webpack.config.js文件中加入loader
   4. webpack上面的配置,
   5. 安装依赖包      
   6. 首先在html代码中加入 div id=”app”
   7. 进入到main.js中, 做你要做的事, 构建一个vue对象的实例, 并且指定render让其渲染
   8. 引入vue对象   , 引入app.vue, 将其完成初始化, 指定控制节点元素 el
   9. 创建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