Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)

简介:

参照链接:

http://cn.vuejs.org/guide/index.html

【起步】部分


本文是在其基础上进行补全和更详细的探寻

嗯,根据朋友的建议,我改投vue阵营了


 

(一)单向绑定

[javascript]  view plain  copy
  1. <div id="app">  
  2.     {{ message }}  
  3. </div>  
  4.   
  5. <script>  
  6.     new Vue({  
  7.         el: '#app',  
  8.         data: {  
  9.             message: 'Hello Vue.js!'  
  10.         }  
  11.     })  
  12. </script>  

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

也可以改为以下这样:

[javascript]  view plain  copy
  1. <div class="app">  
  2.     {{ message }}  
  3. </div>  

[javascript]  view plain  copy
  1. el: '.app',  

一样有效。

 

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

[html]  view plain  copy
  1. <div class="app">  
  2.     {{ message }}  
  3. </div>  
  4. <div class="app">  
  5.     {{ message }}  
  6. </div>  

Hello Vue.js!

{{ message }}


 

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

 

 

(二)双向绑定

[javascript]  view plain  copy
  1. <div id="app">  
  2.     {{ message }}  
  3.     <br/>  
  4.     <input v-model="message"/>  
  5. </div>  
  6. <script>  
  7.     new Vue({  
  8.         el: '#app',  
  9.         data: {  
  10.             message: 'Hello Vue.js!'  
  11.         }  
  12.     })  
  13. </script>  

效果是:

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

 

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

 

 

(三)函数返回值

[javascript]  view plain  copy
  1. <div id="app">  
  2.     {{ message() }}  
  3.     <br/>  
  4.     <input v-model="message()"/>  
  5. </div>  
  6. <script>  
  7.     new Vue({  
  8.         el: '#app',  
  9.         data: {  
  10.             message: function () {  
  11.                 return 'Hello Vue.js!';  
  12.             }  
  13.         }  
  14.     })  
  15. </script>  

效果:

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

②缺点:失去双向绑定!

 

 

(四)渲染列表

[javascript]  view plain  copy
  1. <div id="app">  
  2.     <ul>  
  3.         <li v-for="list in todos">  
  4.             {{list.text}}  
  5.         </li>  
  6.     </ul>  
  7. </div>  
  8. <script>  
  9.     new Vue({  
  10.         el: '#app',  
  11.         data: {  
  12.             todos: [  
  13.                 {text: "1st"},  
  14.                 {text: "2nd"},  
  15.                 {text: "3rd"}  
  16.             ]  
  17.         }  
  18.     })  
  19. </script>  

 

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

个人认为,

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

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

 

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

 

 

(五)处理用户输入

[javascript]  view plain  copy
  1. <div id="app">  
  2.     <input v-model="message">  
  3.     <input type="button" value="值+1" v-on:click="add"/>  
  4.     <input type="button" value="值-1" v-on:click="minus"/>  
  5.     <input type="button" value="重置归零" v-on:click="reset"/>  
  6. </div>  
  7. <script>  
  8.     new Vue({  
  9.         el: '#app',  
  10.         data: {  
  11.             message: 1  
  12.         },  
  13.         methods: {  
  14.             add: function () {  
  15.                 this.message++; //这步要加this才能正确获取到值  
  16.             },  
  17.             minus: function () {  
  18.                 this.message--;  
  19.             },  
  20.             reset: function () {  
  21.                 this.message = 0;  
  22.             }  
  23.         }  
  24.     })  
  25. </script>  

效果:

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

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

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

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

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

 

 

(六)多功能

[javascript]  view plain  copy
  1. <div id="app">  
  2.     <input v-model="val" v-on:keypress.enter="addToList">  
  3.     <ul>  
  4.         <li v-for="val in values">  
  5.             {{val.val}}  
  6.             <input type="button" value="删除" v-on:click="removeList($index)"/>  
  7.         </li>  
  8.     </ul>  
  9. </div>  
  10. <script>  
  11.     new Vue({  
  12.         el: '#app',  
  13.         data: {  
  14.             val: "1",  
  15.             values: []  
  16.         },  
  17.         methods: {  
  18.             addToList: function () {  
  19.                 var val = parseInt(this.val.trim());  //注意,因为当上面的val是字符串类型的时候,才能用trim(),如果是数字类型,则用this.val  
  20.                 if (val) {  
  21.                     this.values.push({val: val});  
  22.                 }  
  23.                 this.val = String(val + 1);  
  24.             },  
  25.             removeList: function (index) {  
  26.                 this.values.splice(index, 1);  
  27.             }  
  28.         }  
  29.     })  
  30. </script>  

效果:

①初始输入框内值为1

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

如图:


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

 

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

 

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

 

 

 

(七)标签和API总结(1

① {{ 变量名 }}

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

 

② v-model=变量

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

[javascript]  view plain  copy
  1. <input v-model="DATE" type="date"/>  
  2. <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.变量名,例如:

[javascript]  view plain  copy
  1. data: {  
  2.     val: "1",  
  3.     values: []  
  4. },  
  5. methods: {  
  6.     addToList: function () {  
  7.         console.log(this.val);  

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

[javascript]  view plain  copy
  1. <li v-for="val in values">  
  2.     {{val.val}}  
  3.     <input type="button" value="删除" v-on:click="removeList($index)"/>  
  4. </li>  

 

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

目录
相关文章
|
7天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
26 1
|
7天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
26 1
|
11天前
|
监控 JavaScript 前端开发
Vue 异步渲染
【10月更文挑战第23天】Vue 异步渲染是提高应用性能和用户体验的重要手段。通过理解异步渲染的原理和优化策略,我们可以更好地利用 Vue 的优势,开发出高效、流畅的前端应用。同时,在实际开发中,要注意数据一致性、性能监控和调试等问题,确保应用的稳定性和可靠性。
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
25天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
27天前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
29 1
|
27天前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
60 1
|
13天前
|
JavaScript 前端开发 C#
从入门到放弃,我们为何从 Blazor 回到 Vue
【10月更文挑战第29天】在前端开发中,许多开发者从尝试新技术 Blazor 最终回到熟悉的 Vue。主要原因包括:1) Blazor 学习曲线陡峭,Vue 上手容易;2) Vue 开发工具成熟,开发效率高;3) Vue 性能优异,优化简单;4) Vue 社区庞大,生态丰富;5) 项目需求和团队协作更适配 Vue。选择技术栈需综合考虑多方面因素。
|
1月前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
58 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
1月前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
101 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)