初入Vue

Posted 2020-12-09 htwice

组件

1. 组件的style作用域
2. 组件是基本的单位

语法

• name是组件名
• props是类似将数据委托给上层组件处理的表达
• data()类似构造函数
• 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
• methods 即该组件的方法
• 生命周期同name这些同级用来描述特定的状态（mounted，beforeDestroyed）
• watch,监视某一个状态是否改变，immediate表示在watch中首次绑定的时候，是否执行handler

模板语法

• v-once一次性插值，作用范围是整个节点
• v-html作为html输出
• v-bind 可以是单个表达式，可以是响应式更新url
• v-on监听DOM Events，支持动态参数v-on:[eventA]:"doA"
• ref是注册一个元素或者子组件的标志，前者类似直接获取dom值

Vue-cli

与html直接引用的cdn比较

• cli中由三个部分组成template，script（其中可以引入其它组件），style
• html添加一个new Vue来标志script的作用域
• 优点：全部文件的生成到渲染都是受到流程控制，提高了可靠性
• 部分不同点：html中model绑定的js写法和Vue-cli中稍有不同，cli中以函数的方法来返回值，前者是键值对来获取data

对静态资源的处理

• 加载的资源的模板值和环境变量(内容的hash可以避免新版本页面加载浏览器缓存中旧版本的css等资源带来的问题)
• 自动注入resource hint(preload和prefetch)前者是加载前加载,后者是页面加载后空闲时间加载, 这里和webpack密切相关
• URL4种转换规则/.~@ (转问题4)

部署

• 简单直接部署静态文件服务器serve
• 前端静态内容是部署在与后端 API 不同的域名上,需要考虑跨域问题

Vue-resource（已经不再维护，可用axios代替）

• 提供了两种方式来处理HTTP，this.$resource.get(url,[option]).then(Scallback, Fcallback)
• put,get,post等restful的风格
• inteceptor在request前后都能插入一些操作
• 通过vue.prototype.$http=axio;能够继续使用resouce的写法

流行的框架最好的一点是遇到问题找到他人的解答，而且他人的数量足够多，层次分布

问题/解答

1. 如何将前端工程化的东西融入到项目中去？因为其依赖网络环境以及现有项目管理方式（Makefile编译设置和SVN管理）
2. 什么是Babel?
   • Babel是编译器，将javascript编译成统一版本的JS代码。一方面开发者可以使用ES6的特性，提高开发效率；另一方面可以选择编译的生产环境的JS版本保证兼容性。
3. Serve的热更新原理?和tomcat中的Jrebel的热更新有何区别？
4. 这与普通的html规则是否相同?
5. 想到了Hexo的页面渲染, 就是前端部署的一种, 只不过从html表达,转换成了md的表达, 静态与动态的使用边界在哪?