Vue.js初步学习:二

Vue.js初步学:二

Vue.js是一套构建用户界面的渐进式框架,Vue 的核心库只关注视图层.

第一步:
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
var vm = new Vue({
el: ‘#test’,
})

可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在下面实例中 id 为 test,意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。

引入vue的js文件

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>

五:使用v-show控制元素显示:
v-show 的true和false控制此元素是否显示
这里写图片描述

这里写图片描述

这里的 ok 参数值和 JavaScript 中的判断一致,为 0、null、undefined、false 时为假,其他值为真。

六:用户输入的双向绑定 使用v-model:
使用两个输入框进行绑定,某一个值的改变将改变另外一个
这里写图片描述

七:绑定方法 使用v-on 例子检测点击事件 反转字符串的方法
这里写图片描述

点击按钮之后:
这里写图片描述

八:数据过滤器 对输入的字符串过滤将第一个字符转换为大写
这里写图片描述
此方法将本将本来的abcdefg 变为了首字母大写Abcdefg

九:v-for标签循环 获取sites元素单个名字为site使用
这里写图片描述

循环一个对象中的全部元素
这里写图片描述

获取循环元素的下标
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值