vue 2.0
渐进式框架
MVC 单向通信
> m:model 数据层 保存数据
> v:view视图层 用户界面
> c:controller 控制器 业务逻辑
> 用户操作界面，通过DOM事件，向控制器发送指令， 执行相应业务逻辑 通知数据层保存或修改状态，在由数据层反馈给视图层；
view(视图层)-->controller(控制器)-->model(数据层)-->vive（返回给视图层）
angular 是单项数据绑定 mvc
mvvm 双向数据绑定
>m:model数据层 保存数据
>v:view视图层 用户界面
>vm：viewModel视图模型
双向绑定
>view(视图层)-->viewModel(视图模型)-->model(数据源)
>1：view(视图层)改变了，viewModel(视图模型)也会改变，model数据源跟着会更新
>2：model数据更新了，也会通知viewModel(视图模型)改变，view(视图层)会跟着改变
vive是双向数据绑定
vue初始化实例
> 初始化一个Vue根实例
> 他需要一个参数对象options
> el挂载元素--他不能挂载在body上面
> data数据（viewModel） 方法 生命周期钩子 template(模板)
>
{{title}}
varvm=newVue({
el:'#app',
data:{
title:'hello ni hao'
}
})
> vue根实例 vm代理data
> vm.title; 得到'hello ni hao'
vue 压缩和不压缩
> 通常开发阶段 引入不压缩版 报错提示便于调试
> 压缩版 vue.min.js是没有报错提示的（开发阶段用這个）
根实例前面带
一个页面，我们通常只生成一个实例
//1:生成一个vue根实例,并传入一个参数对象
varobj={
title:'动态',
say:''
}
varvm=newVue({
el:'#app',
data:obj
})
//vm根实例 会暴露出属性和方法 前面带$
console.log(vm.$data);
console.log(vm.$el);
obj.title='bhhhsuj';//可以修改实例
obj.say='jjsj';//不能在实例生成后再添加属性
vm.$mount('#app')；手动挂载元素
$watch
vm.$watch('title',function(newVal,oldVal){
/*
*@par:newVal新添加的值
*@par:oldVal 旧值
* */
console.log(newVal, oldVal);
});
setTimeout(function(){
vm.title='nnn'
},3000)
模板语法
{{}}
> 1：{{text}} 薄伟玲 可以看到编译前的样子，后面的内容也能显示（可以看到在里面添加的文本）
> 2：不识别html标签
> 3：v-cloak [v-cloak]{ displat:none} 编译前就是一个普通的属性选择器
避免闪烁也可以使用{{}}来插入值
> 4:可以走三元运算/content=content||'没有值'
> 5：可以进行简单的运算
> 6：可以进行转换大小写
> 7：v-once="";一次性插入 插入以后不能在修改了
v-xxx=’xxx’
>1：v-text='text' 薄伟玲 避免了闪烁 避免看不到编译前的样子 看不到添加的文本，覆盖了
>2：v-text='text' 可以识别html标签 尽量少用 避免xss攻击
>
插入动态属性v-bind
插入动态属性v-bind
{{linkText}}
data:{ link:'www.baidu.com',
linkText:百度
}
缩写：
{{linkText}}
v-bind:style
:--> v-bind:的缩写
> :style="{width:'100px',height:'100px',background:'red'}"
> v-bind:style="styleObj"
>
v-bind:sclass
动态绑定class
v-bind:class=''
> 与静态class是共存的
> 对象写法 样式名 booleantrue添加false不添加
> 数组写法 [s1,s2]
v-if 判断指令
v-if=“true”;
插入和移除的作用，操作的是DOM
true是插入显示操作
false是移除不显示操作
v-show true显示/false隐藏
v-for
要循环谁 就把 v-for写在谁身上
{{key}} : {{val}}
-->
nameis{{result.name}} ageis{{result.age}}
v-model
文本框的内容改变 P标签的内容也改变
{{name}}
应用于表单中双向数据绑定 文本框 radio checkbox select textarea
双向绑定 数据改变 视图也改变 视图改变 数据也改变
methods事件集合
v-on绑定事件 click 事件类型say处理函数
> v-on:click="say"缩写 @click="say"
>say()不传参的话默认事件对象
> $event 特殊变量 代表的是事件对象
new Vue({
el:'#app',
data:obj,
methods:{
say:function(e,event){ 存放事件方法 集合
this-->当前的vue根实例
event-->$event 事件对象
}
}
})
filter只要不是当前這一项，其他的都返回出去
v-on 事件修饰符
> v-on:click.parevent阻止默认事件，执行事件不跳转（a标签先执行事件，不跳转）
> v-on:click.stop阻止冒泡传播 修饰符 事件类型 (给谁阻止默认行为，就给他這个stop)
> 修饰符可以串联写法 v-on:click.parevent.stop
> v-on:click.capture捕获阶段capture 从外到内
> v-on:click.one只触发一次点击事件
> v-on:submit.prevent阻止表单的默认行为
按键修饰符
> v-on:[email protected]按下回车键触发 (v-on:[email protected])
> @keyup.space空格
> @keyup.escesc 其他的键码不好使
> @keyup.delete按下删除的键的delete
> @keyup.tab按tab
> @keyup.up上
> @keyup.down下
> @keyup.left左
> @keyup.right右
computed 计算属性
计算属性是默认getter方法
页面一打开的时候，就执行了。 只能在组件里面
computed 通过一个属性 计算出来一个新的属性 当這个属性变化时，新的属性也会跟着变化
varvm = new Vue({
el:'#app',
data:{price:100,count:10,name:'飞机'},
computed:{
//sum属性由两部分组成 （获取，设置）
sum:{
get(){//展示就是获取
//如果price和count变化会导致 sum变化
returnthis.price *this.count;
},
set(val){//赋值就是设置 vm.sum = 100;
//sum变化有可能会改变name变化，computed属性中this依然是vm
this.name =val;
}
}
/*sum() {
return this.price * this.count;
}*/
}
});
watch监听
newVue({
el:'#app',
data:{
val:''
},
watch:{//监听
val(newVal,oldVal){//新值 旧值
console.log(newVal,oldVal)
}
}
});
生命周期钩子函数
- 生命周期钩子函数
letvm=newVue({
el:'#app',
data:{
title:'hello vue.js'
},
beforeCreate(){
alert('实例创建前')
},
created(){
alert('实例创建后')
},
//准备挂载数据
beforeMount(){
alert('数据元素挂载前')
},
mounted(){
alert('数据元素挂载后')
},
//销毁组件的
beforeDestroy(){
alert('销毁前')
},
destroyed(){
alert('销毁后')
},
//数据更新
beforeUpdate(){
alert('更新数据状态')
},
updated(){
alert('更新完成')
}
})
过滤器
1.0有过滤器2.0只能自己定义过滤器
> {{message | uppercase}}
//自定义过滤器
Vue.filter('uppercase',function(){
return arguments[0].toUpperCase();
});
letvm=new Vue({
el:'#app',
data:{
message:'hello word'
}
});
> currency货币过滤器
{{100| currency:'￡'}}
> lowercase & uppercase大小写转换过滤器
{{'abc'| uppercase }}
{{'ABC'| lowercase }}
> limitTo限制位数
{{123456| limitTo:5}}
> number数字过滤器
{{1234.2345|number:2}}
> json对象过滤器
{{{aa:123,bb:456} | json}}
> date日期过滤器
{{1654325689063| date:'yyyy-MM-dd hh:mm:ss'}}
> orderBy排序orderBy:'字段名字':'正反序'(true/false)
{{p.name}}
//$emit发射器
//子组件 需要借助 this.$emit发布相应自定义事件
//父组件 需要在子组件 身上 通过 v-on:自定义事件类型 = 事件处理器， 进行监听 并处理
vue组件
组件可以多级嵌套
全局组件
组件是一个vue强大的功能 扩展html元素 代码重复利用
> 全局组件 在初始化实例之前，注册全局组件
> 参数：
> 1：@param1组件名 多个单词my-compoent 也可以是单个单词 comp
> 2：@param2参数对象 配置 组件 结构（template） 行为(methods) 数据(data).....
> 注意:
> 1：组件data必须是一个函数 返回return 一个对象 data里面存放的是返回页面的数据 title這一类的变量
> 2：组件名不能使用div h3 这些已经存在的标签 要用自定义的标签
> 3：在结构template模板里面，只能有一个根元素，例如一个div套着一个标签，不能有两个div
> 4：可以用多个实例，
> Vue.component('my-compoent组件名');
局部组件
> 局部组件
- 注意：一个单词的话：child就可以了 多个单词用字符串包起来'my-comp1'；
newVue({
el:'#app1',
components:{//局部注册组件
'my-comp1':{
template:'
my-comp1
'
},
child:{
template:'
child
'
}
}
});
data
> 组件的data是一个函数
> 每创建一个组件 返回一个新的属于当前组件组件私有data对象
components: {
child: {
template: '
{{val}}
',
data() { 组件的data是一个函数
return{val: 'hello'}; // 每创建一个组件 返回一个新的属于当前组件组件私有data对象
}
}
父子组件props
> 父子组件通信 通过props 接收外部 传递进来的数据
> 子组件 不可以 直接使用 父组件的 数据
> props 用来 从父组件 传递数据 给子组件
> props 单向数据流 父组件 传递给 子组件数据 父组件 修改了 子组件也跟着修改,但是 子组件不能修改父组件 提示 警告
>
>从子组件外部传递数据 mess='liwenli' 这样的传递都是string
>如果想传递 动态属性 需要 v-bind
let child = {
props: ['myMess','say'],
> 指定 用来接收 传递进来的的数据属性 如果属性名是驼峰命名myMess
> 在 外部使用的时候 全小写 '-' 隔开
> template: '
{{say}}{{myMess}}
',
template: '
{{say}}{{myMess}}
',
};
new Vue({
el: '#app',
data: {
title: 'parentData'
},
components: {
child
}
});
$emit 发射器
> 子组件 需要借助 this.$emit 发布相应自定义事件
> 父组件 需要在子组件 身上 通过 v-on:自定义事件类型 = 事件处理器， 进行监听 并处理
> 接收子组件的通知 并触发 listen(父组件中的定义的处理函数)
子组件传递过来的数据：{{mess}}
newVue({
el:'#app',
data: {
mess:'等待接收'
},
methods: {
listen(val){
console.log(val);// 接收到 子组件的msg
this.mess = val;
alert('收到子组件通知');
}
},
components: {// 定义一个子组件
child: {
template:'
子组件发布
',
data(){
return{msg:'我是子组件传递过来的数据'}
},
methods: {
say(){
alert('子组件进行发布');
// liwenli 自定义事件类型
// this.msg要传给父组件的数据 在发布的时候以参数的 形式传递过去
this.$emit('liwenli',this.msg);// 发布自定义事件
}
}
}
}
});
slot 分放内容 分配位置
> 想把里面的内容插入到文字的前面或者后面，直接把這个标签放进去就行了。放在前面或者后面或者给他起名字，插入到前面后面
>
头部信息
标题
底部信息
new Vue({
el: '#app',
components: {
child: {
// template: '
这是一个主体内容
'
// 具名 slot
template: `
这是一个主体内容
`
}
}
});
is 指定模板插入位置
- keep-alive 缓存组件状态，修改以后，会保存上次修改的内容 必秒重新渲染加载了
-is需要一个component這个标签来嵌入模板，需要把哪个模板引入进去，那就写上他的组件名就行了
users:
books:
--------------->
newVue({
el:"#app",
data:{
comp:'users'
},
components:{
users:{
template:'
',
data(){
return{
val:'users components'
}
}
},
books:{
template:'
',
data(){
return{
val:'books components'
}
}
}
}
})
vue 过渡效果
> name-enter 指定进入过渡开始状态
> name-enter-active 指定进入过渡激活结束状态
> name-leave 指定离开过渡开始状态
> name-leave-active 指定离开过渡激活结束状态
显示/隐藏
// v-show
// 组件切换
newVue({
el:'#app',
data: {
flag:false,
styleObj: {
width:'100px',
height:'100px',
backgroundColor:'red'
}
}
});
animated
我是 animate.css
vue路由 vue-router
> spa单页应用 在一个页面中，切换导航展示响应内容，局部刷新不需要跳转 重新加载整个页面
> 前端路由 在一个页面切换多个页面
导航必须這么写
- router-link是路由标签，他代表页面中的a标签
- to 后面的是路由路径
- router-view他是一个占位符，会把路由标签解析程a标签 必须要写
- keep-alive 避免重复加载，第一次填写的内容，他可以历史记录出来
首页
路由步骤
1.创建组件
let Index = {
template:'
这是首页
'
};
2.配置路由规则 路由路径 映射 组件
let routes = [
{path:'/index',component:Index},
{path:'*',redirect:'/index'} 默认路由
];
3.创建路由实例
let router=newVueRouter({routes:routes});
4.根实例中注入路由router:创建的路由实例 （newVueRouter({routes})）
newVue({
el:'#app',
router:router
})
动态路由
>1:route.params.key 用来获取路径参数-id也可以是name- 获取问号后面的查询参数
>2:全局钩子函数 每次切换之前都会触发，要做权限认证
router.beforeEach(function(to,from,next){})
-to要到哪个路由
- from 从哪个路由开始
-next控制是否继续 也可以传递参数 必须写next
>3:局部的可以写在局部组件里面
letIndex = {
template:'
这是首页
'，
beforeEach(to,from,next){ 当你切换到当前路由之前触发
}
};
>4:this.$router.push('/')切换到指定路由 记录history
>5：this.$router.replace('/')替换路径 不会记录history 两个效果一样
>6：this.$router.go()-1就是回到上一个页面 -2参数就是回到上两个页面 后退
> this.$router.back(1)back是后退 传的是正值
>7：watch(){ 监听
}
vue单文件组件
（vue-clivue脚手架）
> 自定义后缀是.vue文件，一个文件就是一个组件（功能 结构 样式 数据状态）
> 如果想使用vue单文件组件，需要借助编译工具 比如webpack browserify 编译程可以识别的
> vue-cli （vue脚手架）：将基本环境搭建好，然后我们基于這个环境开发
> npm install vue-cli -g
> vue list 安装之后，需要下载哪些列表
> 安装完以后，可以使用vue命令
-vue init 模板名字 项目名字 初始化一个项目
-模板类型：
-webpack - A
-webpack-simple - A
-browserify - A
-browserify-simple - A
-simple
下载之后，做這几步骤
> 1：cd 项目名myvue 进入项目
> 2：安装依赖 npm install
> 3：开启server 阅览 npm run dev 這个server是webpalk帮我们搭建的
import
importVuefrom'vue'在js里面导入vue
初始化
vue init webpack-simple myvue2
cd myvue2
npm install
npmrundev