<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> <style> #app4{ padding: 50px; } .banner{ width: 600px; height: 150px; border-radius: 20px; box-shadow: 5px 5px 10px #888888; font-size: 32px; text-align: center; color: white; background-color: lightblue; margin: 0px auto; } </style> </head> <body> <div id="app"> {{message}} </div> <DIV id="app2"> <p>{{name}}</p> <!--v-model用在input上，类似于value,当input中value改变时{{name}}随着改变--> <input type="text" v-model="name" id="inp"/> </DIV> <div id="app3"> <h1>{{title}}</h1> </div> <div id="app4"> <div class="banner"> {{text | tranformFilter}} </div> </div> <script> var ap= new Vue({ //每一个Vue应用都是通过用Vue函数创建一个新的Vue实例 el:'#app', //数据储存 data:{ message:"hollo world" } }) var ap2=new Vue({ el:'#app2', data:{ name:"hollo" } }) //生命周期钩子函数 //created重新给title进行赋值 //mounted:这时 el 被新创建的 ap3.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内.该钩子在服务器端渲染期间不被调用。 var ap3=new Vue({ el:'#app3', data:{ title:"hole" }, created:function(){ this.title="生命周期钩子函数"; console.log("created()钩子函数执行"); }, mounted:function() { console.log(this.$el); console.log("规模title的值",this.title); console.log("mounted()钩子函数执行"); } }) //过滤器 var cm=new Vue({ el:'#app4', data:{ text:"I love ficesh" }, /*过滤器 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> 1.f 内置文本过滤器 替换 capitalize 过滤器 text[0].toUpperCase() + text.slice(1) 替换 uppercase 过滤器 text.toUpperCase() 替换 lowercase 过滤器 text.toLowerCase() */ filters:{ tranformFilter:function(val){ var strs=val.split(" ") var result=""; for(var i=0;i<strs.length;i++){ result+=strs[i].charAt(0).toUpperCase()+strs[i].substring(1)+" "; } return result; } } }) </script> </body> </html>
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
2.第二种元素绑定
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })
3.v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })