Vue。js(读音/vju& # 720;/,类似于视图)是一套构建用户界面的渐进式框架。与前端框架角一样,Vue.js在设计上采用MVVM模式,当观点视图层发生变化时,会自动更新到ViewModel。反之亦然,视图与视图模型之间通过数据双向绑定(数据绑定)建立联系,如下图所示
Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦),因此我们只需关心数据的操作,DOM的视图的更新等一系列事情,Vue会帮我们自动搞定。
如通过v模型指令实现数据的双向绑定,用户在输入框中输入任意的值,实时显示用户输入信号的值(对应上述MVVM模式关系图不难理解)
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> Vue.js数据的双向绑定& lt;/title>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt; !——引入引导——比;
& lt;链接的href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " rel=把奖怼北?
& lt;脚本src=" https://unpkg.com/vue "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="容器" id=坝τ谩北?
& lt;输入v模型="消息"占位符=扒肴我馐淙搿崩?氨淼タ丶北?
& lt; p>消息是:{{消息}}& lt;/p>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
新Vue({//创建Vue实例
埃尔:“#应用",//挂载创建Vue实例对象
数据:{
信息:“你好Vue.js”
},
方法:{}
})
& lt;/script>
& lt;/body>
& lt;/html>
以下楼主直接绕过Vue.js基础语法,对基础语法不了解的可以查阅相关资料,从通过Vue.js优雅实现任务列表操作案例说起,将Vue.js碎片化的知识点模块整合在一块。
接下来一块体验一下Vue。js(读音/vju& # 720;/,类似于视图)的小清新的/简洁的写法吧。
,,,
Vue。js优雅实现任务列表效果图预览请点击
使用引导前端响应式开发框架,HTML骨架及CSS样式演示如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> Vue.js
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt; !——引入引导——比;
& lt;链接的href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " rel=把奖怼北?
& lt; !——引入vue。js——比;
& lt;脚本src=" https://unpkg.com/vue "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
.list-group按钮{
背景:无;
边界:0;
颜色:红色;
大纲:0;
浮:正确;
粗细:大胆的;
margin-left: 5 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="容器" id=坝τ谩北?
& lt; p v-show=" remainTask.length> 0 "祝辞任务列表& lt;/p>
& lt; ul类="列表组"比;
& lt;李类=發ist-group-item”比;
& lt;跨度title=氨嗉挝瘛痹赩ue。js -是一套构建用户界面的渐进式框架& lt;/span>
& lt;按钮标题="移除任务”祝辞& # 10007;& lt;/button>
& lt;按钮标题="任务完成“祝辞& # 10004;& lt;/button>
& lt;/li>
& lt;/ul>
& lt; form>
祝辞& lt; div class="形式的班级”;
& lt;标签=" exampleInputEmail1 "祝辞任务描述& lt;/label>
& lt;输入类型=拔谋尽眂lass=氨淼タ丶闭嘉环?扒胧淙肽阋砑拥娜挝瘛眗equired>
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;按钮类=癰tn btn-primary”类型=疤峤弧弊４翘砑尤挝? lt;/button>
& lt;/div>
& lt;/form>
& lt; p>已完成的Task
祝辞& lt; ol class="列表组”;
& lt;李类=發ist-group-item”比;
JavaScript高级程序设计
& lt;/li>
& lt;/ol>
& lt;/div>
& lt;/body>
& lt;/html>
& lt; div类="容器" id=坝τ谩眝-cloak>
& lt; p v-show=" remainTask.length> 0 "祝辞任务列表({{remainTask.length}}) & lt;/p>
& lt; ul类="列表组"比;
remainTask & lt;模板v=叭挝瘛痹?
& lt;李类=發ist-group-item”比;
& lt;跨度v:双击=" editTask(任务)“title=氨嗉挝瘛痹趝{task.text}} & lt;/span>
v & lt;按钮:点击=" removeTask(任务)“title=耙瞥挝瘛弊４? # 10007;& lt;/button>
v & lt;按钮:点击=" completeTask(任务)“title=叭挝裢瓿伞白４? # 10004;& lt;/button>
& lt;/li>
& lt;/template>
& lt;/ul>
& lt; form>
祝辞& lt; div class="形式的班级”;
& lt;标签=" exampleInputEmail1 "祝辞任务描述& lt;/label>
& lt;输入类型=拔谋尽眂lass=氨淼タ丶闭嘉环?扒胧淙肽阋砑拥娜挝瘛皏模型=皀ewTask required>”;
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;按钮类=癰tn btn-primary”类型=疤峤弧眝:点击=癮ddTask祝辞添加任务& lt;/button>
& lt;/div>
& lt;/form>
& lt; p>已完成的任务({{filterTask.length}}) & lt;/p>
祝辞& lt; ol class="列表组”;
filterTask & lt;模板v=叭挝瘛痹?
& lt;李类=發ist-group-item”比;
{{task.text}}
& lt;/li>
& lt;/template>
& lt;/ol>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
应用var=new Vue({//创建Vue对象实例
埃尔:“#应用",//挂载DOM元素的ID
数据:{
任务:[
{文本:“Vue。js -是一套构建用户界面的渐进式框架”,完成:假},
{文本:“引导响应式布局”,完成:假},
{文本:“Webpack前端资源模块化管理和打包工具”,完成:假},
{文本:“纱中文手册纱是一个快速,可靠,安全的依赖管理工具”,完成:真正的},
{文本:“JavaScript语言精粹”,完成:假},
{文本:“JavaScript高级程序设计”,完成:真正的}
),
newTask:“程序员的修炼之道”//默认值
},
方法:{
addTask:函数(事件){//添加任务
event.preventDefault ();
this.tasks.push ({
文本:this.newTask,
完成:假
});
这一点。newTask=" ";
},
editTask:函数(任务){//编辑任务//移除当前点击任务
this.removeTask(任务);//更新vue实例中newTask值
这一点。newTask=task.text;
},
removeTask:函数(任务){//删除任务//指向Vue实例中的任务
_tasks=this.tasks;//删除
_tasks。forEach(函数(项目、索引){
如果项目。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
