Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)


Posted in Javascript onSeptember 09, 2016

什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数基础知识,具体详情如下所示:

(一)单向绑定

<div id="app"> 
{{ message }} 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue.js!' 
} 
}) 
</script>

①el应该表示绑定的意思,绑定id=app这个标签

也可以改为以下这样:

<div class="app"> 
{{ message }} 
</div>

el: '.app',

一样有效。

但如果是多个的话,只对第一个有效:

<div class="app"> 
{{ message }} 
</div> 
<div class="app"> 
{{ message }} 
</div> 
Hello Vue.js!
{{ message }}

②data里的message变量,表示{{message}的值

(二)双向绑定

<div id="app"> 
{{ message }} 
<br/> 
<input v-model="message"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue.js!' 
} 
}) 
</script>

效果是:

①input输入框里有初始值,值是data里的message属性的值;

②修改输入框的值可以影响外面的值;

(三)函数返回值

<div id="app"> 
{{ message() }} 
<br/> 
<input v-model="message()"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: function () { 
return 'Hello Vue.js!'; 
} 
} 
}) 
</script>

效果:

①输出值也是message的返回值;

②缺点:失去双向绑定!

(四)渲染列表

<div id="app"> 
<ul> 
<li v-for="list in todos"> 
{{list.text}} 
</li> 
</ul> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
todos: [ 
{text: "1st"}, 
{text: "2nd"}, 
{text: "3rd"} 
] 
} 
}) 
</script>

v-for里的list,类似for in里面的i,

个人认为,

①可以把list in todos,理解为for list in todos

②然后把下一行的list.text理解为 todos[list].text

然后这个v-for标签在哪里,就是以他为单位进行多次复制。

(五)处理用户输入

<div id="app"> 
<input v-model="message"> 
<input type="button" value="值+1" v-on:click="add"/> 
<input type="button" value="值-1" v-on:click="minus"/> 
<input type="button" value="重置归零" v-on:click="reset"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 1 
}, 
methods: { 
add: function () { 
this.message++; //这步要加this才能正确获取到值 
}, 
minus: function () { 
this.message--; 
}, 
reset: function () { 
this.message = 0; 
} 
} 
}) 
</script>

效果:

①对输入框的值,点击一次add按钮,则值+1;

②如果不能加,则像正常表达式加错了那样返回结果,例如NaN;

③data里的message的值,是初始值;

④methods里是函数集合,他们之间用逗号分隔;

⑤获取值的时候,要加上this,例如this.message获取的是message的值。

(六)多功能

<div id="app"> 
<input v-model="val" v-on:keypress.enter="addToList"> 
<ul> 
<li v-for="val in values"> 
{{val.val}} 
<input type="button" value="删除" v-on:click="removeList($index)"/> 
</li> 
</ul> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
val: "1", 
values: [] 
}, 
methods: { 
addToList: function () { 
var val = parseInt(this.val.trim()); //注意,因为当上面的val是字符串类型的时候,才能用trim(),如果是数字类型,则用this.val 
if (val) { 
this.values.push({val: val}); 
} 
this.val = String(val + 1); 
}, 
removeList: function (index) { 
this.values.splice(index, 1); 
} 
} 
}) 
</script>

效果:

①初始输入框内值为1;

②在输入框内按回车键,则会将输入框的内容转为数字,并添加到一个列表里,该列表里转换后的数字和一个删除按钮,并且输入框内的值,变为转为数字后的值加一。

如图:

Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)

③他的添加,利用的是双向绑定,将输入的值push到data里面的values这个数组之种,然后利用渲染列表的效果,输出多行值。

④在button标签里,函数的参数名给了一个参数,是该行索引,参数名是$index

⑤标签里,触发的函数的函数名,可以加括号,也可以不加括号,实测似乎是没有影响的。

(七)标签和API总结(1)

① {{ 变量名 }}

表示绑定的变量,调用时需要用this.变量名

② v-model=”变量”

双向绑定使用,如果input里不加任何type就是文本,如果加type就是type,例如:

<input v-model="DATE" type="date"/> 
<li>{{DATE}}</li>

就会将日期类型的输入框的值,和li标签显示的内容绑定在一起。

③ v-on:click=”函数名”

点击时触发该函数,可加()也可以不加,$index作为参数表示索引,索引值从0开始。

④ v-for

双向绑定的在数组内容更新后,会实时更新,v-model也是;

类似for in语句,被多次使用的是

⑤ v-on:事件

即触发的事件,有click(点击),keypress(按键按下)

事件后面可以跟更具体的,例如keypress.enter是回车,keypress.space是空格等

更多的需要之查看

⑥ new vue

通过new一个vue的实例,然后传一个对象作为参数给这个实例;

其中:

el 表示绑定的模板(只会匹配到绑定的第一个)

data 表示数据,可以直接被取用,例如用在v-model或者是{{变量名}}中

methods 表示方法

⑦ 函数内部调用变量

通过this.变量名,例如:

data: { 
val: "1", 
values: [] 
}, 
methods: { 
addToList: function () { 
console.log(this.val);

这里的this.val就是上面的data.val,也是html里的{{val}},也是v-model=”val”,但不是

<li v-for="val in values"> 
{{val.val}} 
<input type="button" value="删除" v-on:click="removeList($index)"/> 
</li>

里面的val.val,至于原因,个人认为是这里的val处于v-for的作用域内,因此val in values 里的val其在作用域链中的优先级更高

以上所述是小编给大家介绍的Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
vue登录注册实例详解
Sep 14 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 #Javascript
Vuejs第十三篇之组件——杂项
Sep 09 #Javascript
jQuery属性选择器用法示例
Sep 09 #Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 #Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 #Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 #Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
初品cakephp 入门基础
2012/02/16 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Sanic框架路由用法实例分析
2018/07/16 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
一些.net面试题
2014/10/06 面试题
餐厅考勤管理制度
2014/01/28 职场文书
技术比武方案
2014/05/19 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
国庆节新闻稿
2015/07/17 职场文书
电工实训心得体会
2016/01/14 职场文书