vue 基础笔记

Posted 何必再忆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 基础笔记相关的知识,希望对你有一定的参考价值。

Vue01笔记

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

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

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

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

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

    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>  //模板的位置, nebulizerhtml内容和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

 

 

 

 

 

 

 

 

以上是关于vue 基础笔记的主要内容,如果未能解决你的问题,请参考以下文章

vue 基础笔记

vue学习笔记三:vue开发基础下

Vue学习笔记第二篇——Vue基础

Vuejs入门基础笔记

一份不错的vue.js基础笔记!!!!

前后端分离学习笔记 ---[Vue基础]