Vue.js 是什么?
简单小巧,渐进式技术栈。
MVVM 模式(Model-View-View-Model)模式,当View 视图层变化时 会自动更新到ViewModel (视图模型)
Vue.js 通过MVVM 的模式拆分为视图和数据两部分,将其分离。
<div id="app">
<button v-if="showBtn" v-on:click="handleClick">Click me</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
showBtn:true
},
methods:{
handleClick:function(){
console.log('click');
}
}
})
</script>
<!--自动识别最新稳定版本的Vue.js-->
<script src=”https://unpkg.com/vue/dist/vue.min.js”></script>
<!--指定某个具体的版本-->
<script src=”https://unpkg.com/vue@2.1.6/dist/vue.min.js”></script>
引入框架之后,在body底部使用new Vue()方式创建一个实例 这就是vue.js最基本的开发模式。
v-model 数据双向绑定
<div id="app">
<input type="text" v-model="name" placeholder="您的名字">
<h1>你好,{{ name }}</h1>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
name:''
}
})
</script>
创建实例 :
var app = new Vue({ el: document.getElementById('app') 或者'#app' })
除了显式声明数据外,也可以指向一个已有的变量,并且默认建立了双向绑定,修改其中一个,另一个也会变化。
var myData={ a:1 } var app = new Vue({ el:'#app' ,data:myData })
生命周期:
Vue的生命周期也有:
created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不能用。
mounted el挂载到实例上 (一般第一个业务都会在这里开始)
beforeDestroy 实例销毁之前调用 主要解绑一些使用 addEventListener监听事件等。
插值与表达式:
使用双大括号 (Mustache 语法) {{}} 是最基本的文本插值方法,会自动将我们双向绑定的数据实时显示出来
<!--{{}}胡子语法-->
<div id="app"> {{ book }}</div> <script> var app = new Vue({ el:'#app', data:{ book:'<vue.js>' } }) </script>
有时候想输出html 直接使用v-html
<div id="app"> <span v-html="link"></span> </div> <script> var app = new Vue({ el:'#app', data:{ link:'<a href="#">这是一个连接</a>' } }) </script>
link内容会被渲染为一个具有点击功能的a标签,如果将用户产生的内容使用v-html输出后,有可能导致xss攻击,所以要在服务器端对用户提交的内容进行处理,一般将尖括号<>转义