vue前奏

vue前奏

vue介绍

  • weex 能够转换vue代码,成为移动端原生应用 ios Android PC
  • vuex 凡是大型项目必用

核心特点

  • 组件化,组件化比模块化更分
    • 组成部件
    • 组件: 模板template+ 动态效果script + 样式style + 逻辑(使用Math(模块))
    • 组件内使用模块,模块内不使用组件
  • 双向数据流(双向数据绑定的现象)
    • 内存(js对象的属性)发生改变影响页面
    • 页面发生改变影响内存(js对象的属性)
  • 数据驱动
    • 内存的属性发生改变,驱动页面显示做调整
  • 双向数据绑定实现原理
    • 数据劫持
  • IE9以下不支持
  • 善于开发单页应用SPA

vue文件相关操作

1-创建index.html 并且在页面中留下一块div(id),未来vue将生成好的代码放入进来

1
2
<!-- 1:留坑,主体部分显示 -->
<div id="app"></div>

2-在(入口)main.js中, 引入Vue对象(构造函数)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//1: 引入Vue
import Vue from 'vue';//逐级向上查找node_modules下面有没有vue文件夹
// require('ejs'); // 引入的时候。,逐级向上查找node_modules下面有没有ejs文件夹
//2:创建并引入App.vue
import App from './App.vue';
//3:构建vue 实例
new Vue({
//目的地
el:'#app', //将数据渲染到id为app的元素上 innerHTML
render:function(creater){ //想象成vue-template-compiler
return creater(App); // return <ul><li>哈哈呵呵</li></ul>
}
//render:<ul><li>哈哈呵呵</li></ul>
})

vue调试工具

  • 全局安装 webpack-dev-server
  • 命令 npm i -g webpack-dev-server
    • 由于全局安装未知原因导致无法直接改代码看效果(热替换)
  • 在当前项目中,安装一个跟项目走的webpack-dev-server
  • ..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 9999
  • 启动的时候 当前目录存在webpack-config.js文件
  • 命令 webpack-dev-server --inline --hot --open --port 9999
    • inline 自动刷新
    • hot 热替换 ,不重启(不刷新),
    • open 自动打开默认的浏览器
    • –port 端口号

package.json 配置热替换快捷键

1
2
3
4
"scripts": {
"dev": "node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 9999", // npm run dev 开发
"build": "webpack" // npm run build 上线
},