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. 预习；表单控件；
以上是 vue - 计算属性、表单输入绑定 的全部内容， 来源链接： utcz.com/z/374808.html
