vue - 计算属性、表单输入绑定
计算属性
computed:{}
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="computed"> <div> <!-- dlrow olleh --> <!-- {{msg.split('').reverse().join('')}} --> {{reverseStr}} </div> <button @click='clickHanlder'>修改</button> </div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> var com = new Vue({ el:"#computed", data:{ msg:"hello world" }, methods:{ clickHanlder(){ console.log(this.reverseStr); // get this.reverseStr = "Hello Luffy" // set } }, computed:{ // 默认只有 getter 方法 // 计算数据属性 watch 监听 // reverseStr(){ // return this.msg.split('').reverse().join('') // } reverseStr:{ set:function(newValue){ this.msg = newValue; }, get:function(){ return this.msg.split('').reverse().join('') } } } }) </script> </body> </html>
计算属性的应用 v-model
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- preevent 可以阻止发送 form 表单，可以 ajax--> <form id='computed' @submit.prevent> <!-- <input type="text" v-model='msg'> --> <input type="text" v-model.lazy='msg'> <input type="number" v-model.number='msg'> <h3>{{msg}}</h3> <input type="submit" name="" value="提交"> <!-- v-model 实现原理- --> <!-- <input type="text" v-bind:value='getValue' @input='msgChange'> --> <!-- <h3>{{getValue}}</h3> --> <!-- 官网 https://cn.vuejs.org/v2/guide/forms.html --> </form> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> var com = new Vue({ el:"#computed", data:{ msg:"123" }, methods:{ msgChange(e){ console.log(e.target.value) this.getValue = e.target.value } // $.ajax() xmlhttpRequest axios 能做ajax技术 }, computed:{ getValue:{ set:function(newValue){ this.msg = newValue }, get:function(){ return this.msg } } } }) </script> </body> </html>
介绍
vue的核心：声明式的指令和数据的双向绑定。
那么声明式的指令，已经给大家介绍完了。接下来我们来研究一下什么是数据的双向绑定?
另外，大家一定要知道vue的设计模式：MVVM
M是Model的简写，V是View的简写，VM就是ViewModel。
通过官网的介绍，我们知道v-mode指令是v-bind:vlaue 和v-on:input的结合体。
----------------------------------------------------------
v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model只适用在表单控件中
比如：表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。内容太多，就不给大家一一阐述了。大家一定要去阅读vue的官网文档
https://cn.vuejs.org/v2/guide/forms.html
ps:官网上的vue的文档非常好，喜欢vue的同学没事多来看看！
笔记
模块化
一个js就是一个模块
export default xxx
import xxx form ooo
-----------------
前端工具
webpack:打包机 html css js font 打包，之后交给服务器
html 文件太大；
webpack 有一些loader 加载器 插件
插件： 一个功能，一个js文件
组件： bootstrap，包含js html css ; 组件包含插件
webpack
可以对html压缩，
css压缩
js压缩 混淆；
减小服务器的压力，安全
图片压缩
前期：
grunt
gulp
-----------------
node.js 小型的服务器
node.js + webpack
（热重载）
npm run dev
实时监听 只要保存 就自动刷新了
-----------------
nodejs 服务器语言
npm init --yes 初始化我们的项目
自动的生成一个package.json文件
npm install jquery --save
npm install webpack --save-dev (开发依赖)
----------------
如果你拿到一个新的项目
cd 当前目录
// npm rebuild 重建一下 在 run install 出错的情况下；
npm install
npm run dev
npm start
npm run build
淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
-----------------------
vue 框架 单页面
网易云页面
掘金
尽可能减少请求；减少服务器的压力；前端做性能 做优化，主要都是为了减少服务器的压力。
vue主要用来做单页面的，主要是做移动端的！做移动端优先，
一级路由 二级路由
/books/1
/publish/
-----------------------------
作业：
1. 上一页
2. 列表选中当前一项变色； 选项卡www.sina.com.cn
3. 代码敲一遍 知道每个指令干嘛的，熟练computed 计算属性的用法
4. v-model原理实现，
5. 预习；表单控件；
