为什么选择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节点，但此时{{ name }}还没有被成功地渲染成我们data中的数据。
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 组件停用时调用。