vue.js
vue.js是前端的一个框架
框架就是技术、代码的封装,在框架的基础上进行开发,语法简单便捷高效
现在学习的javaScript语法称为原生态,语法复杂
MVVM
MVVM:Model-view-viewModel是前端的一种架构思想
原生js做法:获得要操作的标签对象(DOM对象),将值赋给标签对象的属性
vue.js框架
可以实现js中数据与网页中的标签之间的双向数据绑定,任意一方改变,都可以自动更新另一方
第一个Vue程序
<div id="app">
{{message}}
</div>
var app= new Vue({
el:"#app",
data:{
message:"你好 vue"
}
})
代码解析:
{{}}插值表达式获取data数据
new Vue()创建一个vue对象
el:"#app"--el->elemen 指定哪个标签与vue对象绑定
可以使用其他表达器,建议使用#
可以使用其他闭合标签,不能使用<body>,<html>
Vue指令
指令指带有前缀v-开头,以表示他们是vue提供的特殊属性
v-text
设置标签的文本内容
默认写法会替换所有内容,使用插值表达式可以替换指定内容
不能解析标签,将字符串当作文本输出
内部支持写表达式
v-html
设置元素的innerHTML
可以解析字符串中的标签
内部支持写表达式
v-model
便捷的设置和获取表单元素的值
可以将输入框的value属性值与vue中的data相绑定
双向数据绑定
v-on
为标签添加事件,为事件绑定处理函数
指令可以简写为@
v-show
控制标签是否显示 通过操作标签的display属性操作,效率高
值为 true 元素显示，值为 false 元素隐藏
v-if
控制标签是否显示 通过直接操作dom(删除,创建)
显示状态表达式的值为 true,元素存在于dom中，为false，从dom中移除
频繁的切换 v-show，反之使用 v-if，前者的切换消耗较小
扫一扫
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
