2018 April 21 —— improvement; web; js

Vue 学习记录

团队下面前端的业务居多,不能总是谈到前端知识一脸茫然,这里利用周末时间学习 Vue 的相关知识,并实践,后续通过给自己安排一个实际项目来切入前端领域的开发;

官方文档

随着页面的复杂化,大型化,借助框架进一步组织管理项目的开发构建;

  • 渐进式
  • 组件化

各种 vue 指令:

  • v-if
  • v-for
  • v-bind
  • v-model <双向绑定>
  • v-on <事件监听>
 
// 利用 Node 构建 localHost 加载 html
var http = require('http');
var fs = require('fs');  

// 启动本地服务器加载 html  --> Load 非静态资源
var server = http.createServer(function(req,res){
  console.log('client request');
  console.log(req.url); //req.url =  localhost:8080/index.html 中的 /index.html
  //
  var file = '.' + req.url;
  fs.readFile(file,function(err,data){
    if (err) {
      console.error(err);
    }

    res.writeHeader(200,{
      'content-type' : 'text/html;charset="utf-8"'
    });
    res.write(data);
    res.end();
  });
  
}).listen(3000);
console.log('server create success');

Vue Component 组件: 所有的 Vue 组件都是 Vue 实例;

Vue 的响应式更新: Vue 对象构建时其data当时存在属性为响应式,属性数据被更改对应视图重新渲染;但在后续运行时增加的属性非响应式;

Vue 对象的一些有用的 $ 属性;

Vue 的声明周期属性: 注意声明周期函数不要使用es6中的箭头函数,由于箭头函数中的 this 域和父上下文绑定,可能出现 this 不是我们想要的 Vue 实例;

init–> created –> beforeMount –> mounted <核心声明周期> --> beforeDestroy --> destroyed

模版语法

插值 {{}}

Vue 的 js 表达式支持,<注意: 是表达式,不是语句>

常用的 v-指令以及指令参数: v-bind v-on 的缩写指令; 如 v-bind 将元素属性与表达式属性的绑定;

组件
  • 组件注册

全局注册: Vue.component()

局部注册: Vue{ components{}}

  • 组件组合

父子组件中的组件数据传递以及事件的交互

Prop 传递 -> 子组件定义的 prop 与 父组件 data 绑定
注意: 直接的 props 传递与 v-bind props 传递的差异: 字面量与表达式

组件中的单向数据流: 子组件不应该去改变父组件所传递的 props

props 的类型预校验

事件的传递: 子组件报告内部事件, 父组件监听子组件事件的发生,同时做出自己的变更

  • 可复用组件构建: prop, 事件,插槽 –> 区别于一次性业务组件的差异

Vue 项目运行

利用 vue-cli 脚手架构建运行项目–> pass

Vue 项目结构

  • build
  • node-module
  • src
  • static
  • test
  • index.html
  • package.json

针对 特定格式的 .vue 文件,在 build 构建打包过程中最终变成浏览器可识别的 html / css /js 文件

流程:

引入 Vue -> 实例化 Vue 对象 -> 创建 Vue div -> 填充绑定数据

Vue 双向绑定 MVVM
上一篇
下一篇
Loading Disqus comments...
Table of Contents