为什么选择Vuejs
预读:为了满足当前移动webApp项目的开发需求,MVVM框架诞生,而VUEJS 便是这样一种js框架,其两大核心:数据驱动
和组件化
- 为了解决webApp这些体验和开发上的不足,使用一个MVVM框架VUELS;
什么是MVVM
(数据驱动视图)
- View --- ViewModel --- Model三部分
页面DOM viewModel model数据
- 中间监控两侧的数据,并相对应地通知另一侧进行修改;
这就是MVVM框架,属于MVVM的JS框架还有React.js,Angular.js
Vue的优点
- Vue更轻量更快
- 更容易上手
Vue核心
-通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
-
数据绑定
- Vue数据驱动视图:数据改变视图自动更新,传统的做法要手动改变DOM来改变视图,VUEJS只需要改变数据,就会自动更改视图,不用再担心DOM;
-
视图组件化
- 把整一个网页的拆分成一个个区块,每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成;
使用场景
- 如果你还在用jQuery来频繁的操作你的DOM更新页面的话,就可以用vue.js来解放DOM操作;
- 如果项目中有多个部分是相同的,并可以封装成一个组件,那就可以使用Vue.js
- 此外,vue.js的核心使用了ES5的Object.defineProperty特性.IE8以下的版本是不兼容的;
总结
为了更好满足当前移动webapp项目的开发需求,MVVM框架诞生,而Vue.js便是这样的一种js框架,其两大核心:数据驱动和组件化。
简单安装和快速入门Vue.js
- 如果不想安装到本地,使用CDN方式,引入网上的资源
<script src="https://xx/vue.js"></script>
- 还可以通过npm在命令行下载
数据驱动视图
<div id="app">
公众号:{{ name }}
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
name:"web前端教程",
}
});
</script>
- 我们通过new Vue( )创建一个实例vm,参数是一个json对象,属性el提供一个在页面上存在的DOM 元素(id='app'),表明这个实例是关联指定的DOM节点。
- 在DOM节点上,我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值,如上面案例中的name属性的值“web前端教程”就会被渲染到页面中,替换{{ name }} 显示效果为:“web前端教程”
双向绑定
- 例子:监听用户在页面输入框输入的内容,然后将其实时更新在页面上。
在Vue中我们使用v-model指令就可以轻松实现
<div id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"",
}
});
</script>
组件
组件化就是把页面中特定的区块独立抽出来,并封装成一个可方便复用的组件。
- 加入页面上有三个同样的图片,传统的办法,我们需要写三个同样布局的HTML布局;
<div id="app">
<!--第1个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述,很长的描述</p>
<button>我是按钮</button>
</div>
<!--第2个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述,很长的描述</p>
<button>我是按钮</button>
</div>
<!--第3个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述,很长的描述</p>
<button>我是按钮</button>
</div>
</div>
- 如果我们把每个卡片看作一个可复用的区域的话,那么它就可以封装成一个组件。
<div id="app">
<card></card>
<card></card>
<card></card>
</div>
<script>
//注册一个名叫card的组件
Vue.component('card',{
template:`<div>
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述,很长的描述</p>
<button>我是按钮</button>
</div>`
});
- 我们用Vue.component(tagName, options)注册了一个名字叫card的组件,这样,在需要复用这个组件的地方,我们只需要使用就可以了。实际开发中,组件比这个复杂得多,越复杂,封装后的便利性越高
- 可能你会说,组件里面的显示的内容不可能全都一样。放心,Vue为组件提供了props属性来接受传递进来的参数,后面会介绍
创建一个Vue实例
创建语法
<script>
var app=new Vue({})
</script>
设置数据
let vm = new Vue({
//实例vm的数据
data:{
name: "张三",
age : 21
}
});
挂载元素
//视图view部分
<div id="app"></div>
渲染
<div id="app">
我是{{ name }},
今年{{ age }}岁
</div>
总结
创建并使用一个Vue实例并不难,仅需4步走:
newVue----->设置数据----->------->挂载元素------->成功渲染
定义Vue常用的4个常用选项
filters 过滤器
例如:我们有一组数字全是小数,
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:33.141,
num2:46.212,
num3:78.541
}
});
展示到页面中
<div id="app">
数字1:{{ num1 }}<br>
数字2:{{ num2 }}<br>
数字3:{{ num3 }}
</div>
- 突然,需求改了,我们不能把小数展示出来,需要把小数转换成整数再显示
- 这个时候,我们需要把三个小数经过过滤处理后再展示,不能直接展示。这种情况就需要用到Vue的filters过滤器了
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:33.141,
num2:46.212,
num3:78.541
},
//过滤器
filters:{
toInt:function(value){
return parseInt(value);
}
}
});
- 相信大家都注意到了,参数对象除了el和data属性之外,还多了一个filters属性,它的值也是一个对象,里面定义了一个叫toInt( )的方法,传入了一个value的参数,函数的作用就是把传入的参数value,简单地转成一个整出并return回去。
紧接着:通过管道符|把函数toInt 放在变量后面即可,num1,num2,num3会分别作为参数value传入toInt( value )方法进行运算,并返回一个整数
<div id="app">
数字1:{{ num1 | toInt}}<br>
数字2:{{ num2 | toInt}}<br>
数字3:{{ num3 | toInt}}
</div>
computed计算属性
我们有三个数,但是需要展示的是三个数字之和。这种情况,就适合用我们的计算属性computed。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:1,
num2:3,
num3:6
},
//计算属性
computed:{
sum:function(){
return this.num1+this.num2+this.num3
}
}
});
紧接着 :
<div id="app">
总和:{{ sum }}
</div>
需要注意的是,sum的值是依赖data中的数据num1,num2,num3的,一旦它们发生了变化,sum的值也会自动更新。
methods 方法
我们定义一个数据a,当用户点击按钮的时候,a的值加1。这种情况,我们可以利用methods来实现。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus:function(){
return this.a++;
}
}
});
定义一个plus( )的方法在methods中,下面我们把plus( ) 绑定在按钮的点击事件上
<div id="app">
{{ a }}
<button v-on:click="plus">加1</button>
</div>
watch观察
watch选项是Vue提供的用于检测指定的数据发生改变的api。
//在上面的例子中,在方法下面直接再加一个属性
watch:{
a:function(){
console.log(`有变化了,最新值:`);
console.log(this.a);
}
}
最后一部分watch就是我们新加的代码,a( ) 表示我们要观察监听的就是数据a;
Vue的实例的生命周期
Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段,每个阶段都会给一些“钩子”
beforeCreate
<script>
let app = new Vue({
el:"#app",
data:{
name:"前端君"
},
beforeCreate(){
console.log('即将创建');
console.log(this.$data);//undefined
console.log(this.$el);//undefined
}
});
- 此时的实例中的data和el还是undefined,不可用的。
created
created(){
console.log('创建完毕'); //创建完毕
console.log(this.$data); //object{_ob_:Observer}
console.log(this.$el);//undefined
}
- 此时,我们能读取到数据data的值,但是DOM还没生成,所以属性el还不存在,输出$data为一个Object对象,而$el的值为undefined。
beforeMount
beforeMount(){
console.log('即将挂载');
console.log(this.$el); //<div id="app">{{name}}</div>
}
- 此时的$el不再是undefined,而是成功关联到我们指定的dom节点
mounted
mounted(){
console.log('挂载完毕');
console.log(this.$el);//<div id="app">前端课程</div>
}
- 此时打印属性el,我们看到{{ name }}已经成功渲染成我们data.name的值:“前端课程”。
beforeUpdate
- 当修改vue实例的data时,vue就会自动帮我们更新渲染视图,在这个过程中,vue提供了beforeUpdate的钩子给我们,在检测到我们要修改数据的时候,更新渲染视图之前就会触发钩子beforeUpdate
//html片段代码我们加上ref属性,用于获取DOM元素(后期会讲到)。
<div ref="app" id="app">
{{name}}
</div>
// Vue实例代码加上beforeUpdate钩子代码:
beforeUpdate(){
console.log('=即将更新渲染=');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
},
在控制台修改一下实例的数据name,在更新渲染之前,name还是之前的数据,视图并未重新渲染更新
updated
- 此阶段为更新渲染视图之后,此时再读取视图上的内容,已经是最新的内容,接着上面的案例,我们添加钩子updated的代码
updated(){
console.log('==更新成功==');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
}
此时name 的值已经被改变了,视图已经更新;
beforeDestroy
- 调用实例的destroy( )方法可以销毁当前的组件,在销毁前,会触发beforeDestroy钩子
destroyed
- 成功销毁之后,会触发destroyed钩子,此时该实例与其他实例的关联已经被清除,它与视图之间也被解绑。
- 此时再在控制台修改数据,视图不会改变
actived
- keep-alive组件被激活的时候调用
deactivated
- keep-alive 组件停用时调用。