您的位置：首页 > Web前端 > Vue.js

vue - 计算属性、表单输入绑定

2018-07-16 11:04 537 查看

计算属性

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. 预习；表单控件；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航