VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)
02 VueJS基本用法 {{msg}}
数量:{{(num + 1) * 10}}
原样显示带有HTML标签的变量:{{menu_template}}
文章图片
文章图片
上面的代码中,包含了VueJS最基本的4中用法:
1、变量的使用
{{msg}}
数量:{{(num + 1) * 10}}
原样显示带有HTML标签的变量:{{menu_template}}
这段HTML代码,通过 {{}} 使用了new Vue() 中 data{} 定义的一些变量,在VueJS中实现了数据和页面元素的双向绑定。
2、模板的绑定
这段HTML代码,通过v-html="变量名称"的形式,实现了带有html标签的变量的显示。
3、属性的绑定
文章图片
文章图片
这段HTML代码,通过【v-bind:src】的形式,实现了html元素属性的绑定;它的缩写格式为 【:src】
4、事件的绑定
这段HTML代码,通过【v-on:click】的形式,实现了点击事件的绑定;它的缩写格式为【@click】;
一般的,绑定事件后,会调用对应的函数实现业务功能,如上述代码就调用了名为 count_num()的函数,该函数在 new Vue() 代码中通过 methods:{
count_num:function(){
}
}方式来定义。
5、VueJS程序的结构说明
通过上述代码可以看出来,VueJS程序包括两个部分:
(1)模板
{{msg}}
数量:{{(num + 1) * 10}}
原样显示带有HTML标签的变量:{{menu_template}}
文章图片
文章图片
(2)js代码
【VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)】
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 做一件事情的基本原理是什么()
- 2020-04-07vue中Axios的封装和API接口的管理
- dubbo基本认识
- VueX--VUE核心插件
- HTML基础--基本概念--跟着李南江学编程
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- vue组件中为何data必须是一个函数()
- 一般模型化关系——从模型是什么到如何起作用的基本答案
- 用npm发布一个包的教程并编写一个vue的插件发布