Vue.js
vue.js安装
先安装node和npm 查看使用
node -vnpm -v
安装vue-clisudo npm install -g vue-cli
查看是否安装成功vue
在想要安装的地方安装项目vue init webpack 项目名
进入项目运行cd 项目名|npm run dev
? Project name test
? Project description 我的第一个项目
? Author caijunyu <vshiron@163.com>
? Vue build standalone
? Install vue-router? Yes （路由）
? Use ESLint to lint your code? No （语法检查）
? Setup unit tests with Karma + Mocha? Yes （单元测试）
? Setup e2e tests with Nightwatch? (Y/n) y
vue.js基础
MVVM框架双向的数据绑定
- M-model 数据层
- V-view 视图层
- VM-view model 视图模块 - vue
使用小胡子语法来实现最简单的数据展示
template模版，可以在创建的组件和实例中添加html模版
data:{}用来存放数据methods:{}用来存放方法 不会有缓存computed:{}计算方法 根据依赖有缓存 setter getter(自带)watch:{}监听方法filters:{}过滤器方法directives指令components:{}创建局部 存放导入的组件component创建去全局组件, 组件名字最好全小写,并且带一个-连字符
组件中的data必须是函数
方法, 计算属性和监听的区别:
- 方法不会有缓存, 使用一次运行一次
- 计算属性存在缓存, 当他所依赖的值没有发生变化的时候会使用上一次的结果, 只有发生变化的时候才会更新
- 监听,
vue中的指令
- v-text 和差值表达式的的使用结果一样 v-text=“变量名”. 是变量里面的内容会覆盖原有标签上的内容
- v-html
也可以输出变量中的内容，加粗显示 可以在数据data中定义一个html内容然后使用这个标签来输出
<div v-html="p"></div>data:{p:'<h1>hello</h1>'}
- v-show
使用v-show这个指令也可以实现数据的显示变化，她在不显示的时候只是隐藏了这个，而if会直接删除;
频繁的需要隐藏和显示推荐使用v-show, 只显示一次,或者可能很少看到的使用v-if
- v-if v-else
v-If循环：if后面的值为true或者false。
- v-for
这个可以有三个参数，value key index
<li v-for="(value,key,index) in(of) object">{{index索引}}.{{key属性名}}:{{value值}}</li>
当给v-for循环一个对象的时候，会直接输出对象中的各项属性值。v-for="(val, key) in user"
- v-on:
也可以简写成@v-on:click="fn"其中的this指向的是实例
如果不传入参数则不需要写括号会自动传入事件源event，调用的方法会有一个event的形参 如果加了括号需要手动传入$event属性，后面在加上要传入的其他参数
- v-bind: 可以缩写为
:
- v-model
通过绑定变量，本身发生变化的时候，绑定的变量也会发生变化 主要是用在表单组件上
修饰符:v-model.修饰符.lazy(转变为change，输入完成之后才会更新页面) .number(数字) .trim(空格)
- v-once 你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
- v-cloak 解决闪烁问题被他包含的内容将在页面加载完成之后显示
[v-cloak] { display: none }
修饰符
事件修饰符
.stop阻止单机事件继续传播 事件冒泡 事件从下往上执行 意思就是只触发自身的点击事件
.prevent提交事件不再重载页面,阻止默认行为
.capture即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 事件捕获 就是优先执行
.self只当在 event.target 是当前元素自身时触发处理函数 自会阻止自己的冒泡事件
.once点击事件将只会触发一次
.passive滚动事件的默认行为 (即滚动行为) 将会立即触发
按键修饰符
.enter
.tab
.delete(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<input v-on:keyup.13="submit">使用键盘码
你还可以通过全局Vue.config.keyCodes.f1 = 112对象自定义按键修饰符别名
系统修饰符
.ctrl
.alt
.shift
.meta
<input @keyup.alt.67="clear">ait+c
鼠标按键修饰符
.left
.right
.middle
过滤器
使用管道符
|来过滤 可以用在双花括号插值和 v-bind 表达式
其中的this指向的是window
filters:{}过滤方法写在这个里 方法的参数方法名(data,参数,参数){ 可以使用data }
当有多个根实例的时候，如果想要公用一个过滤器，可以创建一个根过滤器Vue.filter('名',(data)=>{方法体});要放在页面的顶部
var date = new Date( 一个字符串 );
var y = date.getMonth() + 1;
var d = date.getDate();
return${y}+${d}就会根据给定的字符串,得到特定的时间, 返回的需要带上引号
生命周期钩子
beforeCreate在实例初始化之后，实例创建完成之前,数据观测 (data observer) 和 event/watcher 事件配置之前被调用created在实例创建完成后被立即调用 专门用来发送ajax的方法 他的this指向实例本身beforMount在挂载开始之前被调用, 模版已经初始化完成在内存中mountedel 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 dom创建beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子activatedkeep-alive 组件激活时调用deactivatedkeep-alive 组件停用时调用beforeDestroy实例销毁之前调用destroyed实例销毁之后调用
使用v-bind指令绑定样式
使用v-bind绑定class样式，可以直接绑定到一个样式，也可以直接绑定到两个样式；除此之外，可以吧可以直接把他绑定到一个组里，在data里面直接定义这个组，组中的属性为要绑定的class名。还可以直接给它绑定一个计算属性的方法，最后也可以为他绑定一个数组，数组中的值是两个变量，两个变量在data中以activeClass: 'active',的形式来定义一个新的class。
绑定样式：
:class="['name', 'name']"直接绑定:class="[ isFlag?'active':'']"三元表达式:class="[{'active': isactive}]"内嵌对象<div v-bind:class="{ active: isActive, this: true }"></div>——外联样式
给这个div绑定一个class，名字为active，当后面的值为true的时候就会绑定这个class，从而添加样式。
也可以为class绑定一个数组，其中的值对应的是data中的属性值<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>---内联样式- 通过style绑定内联样式
<div v-bind:style="styleObject">菜鸟教程</div>——绑定样式对象
在对象中写好样式，定义在data中。styleObject: { color: 'green', fontSize: '30px'}<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>—— 绑定样式数组
每一个数组的元素都定义在data中，baseStyles: { color: 'green',fontSize: '30px'}
V-bing:class=“{ class名字 : true/false}”
V-bind :style=“{ 属性名字：属性值}"
计算属性 computed 不是方法
- 方法不会有缓存 computed会根据依赖的属性进行缓存
- 由两部分组成get和set(不能只写set)
- 根据一个值给他设定一个计算属性，当这个值变化的时候执行对应的改变
- 默认调用get方法，必须要有return，不支持异步
另一个值(){}
watch 监听一个值
- watch的属性民要和观察的人的名字一致
a(新值,旧值){}- 只有值变化的时候才触发 支持异步
vue.js组件
父子组件之间的传值
父组件往子组件中传值的时候是通过属性来传值的；存放在子组件的poro中。
子组件通过事件触发的方式来传值，创建一个触发事件this.$emit(“delete”)；
当给一个组件传递一个对象的时候，对象中包含很多的属性，你可以直接使用<blog-post v-bind="post"></blog-post>直接绑定这个对象，然后对象中的属性就会自动全部绑定
在prop中可以验证一个值的类型，这个时候prop后面跟着的是一个对象required: true表示是必填字段
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
创建全局组件
全局注册的组件可以用在其被注册之后的任何(通过new Vue)新创建的Vue根实例，也包括其组件树中的所有子组件的模板中
组件命名规则:使用的时候最好使用连字符
不使用驼峰命名则直接使用
驼峰命名在使用的时候,要用连字符隔开
Vue.component（“组件名”,{ //创建全局组件
data: function(){ // 一个组件的data必须是一个函数
return {
数据
}
},
props : ['content’], //=> 用来存放父组件传回来的值
template: "<li>{{content}}</li>”, //=> 创建的组件模版
})
Vue.component("mycompenent",{
props:{
propA:Number, //一种数据类型要求
propB:[Number,String], //多种数据类型要求
propC:{ //数据类型，是否必须，默认值
type:Number,
required:true,
default:18
},
propD:{
default:function(){ //自定义默认值函数
return {message:'hello'};
}
},
propE:{
validator:function(args){ //自定义验证函数
return args>10;
}
}
},
data:function(){
return {
count:0
}
},
template:'<div>....</div>'
})
var com = Vue.extend({
template: '<>'})
Vue.component('mycom',com);
<mycom></mycom> 使用
创建局部组件
。。。
var TodoItem = { //=> 创建局部组件
props: ['content','index’], //=> 存放值
template: "<li @click='handItemClick'>{{content}}</li>”,//=> 模版
methods: { //=> 方法
handItemClick: function(){
this.$emit("delete",this.index);
}
}
}
//=> 局部组件创建成功之后，要在根实例中使用需要在实例中注册一下
components:{ 'a-b':Ab(局部组件名) }
//=> 也可以在创建的其他子组件中使用，但是需要导入注册
import ComponentA from './ComponentA.vue' //=> 导入
export default {
components: {
ComponentA //=> 注册
},
// ...
}
Prop
类型：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']一般都是这样
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }
这样可以为每一个props的值设置指定的类型
自定义命令
创建自定义的命令
<body>
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script> //-----------创建全局命令
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 第一次绑定到元素的时候
bind: function(el){};
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
},
// 所在组件更新时
update: function(el) {},
// 指令所在的组件的VNode以及其子VNode 全部更新后调用.
componentUpdate : function(el) {}
// 指令和元素解绑的时候调用,只调用一次
unbind: function (el) {}
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
<script> ---------创建局部命令
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
vue.js动画 *
需要先使用transition包起来要有动画的内容
transition中有多个元素的时候 需要给他们添加一个key值来区分，在他的属性中可以定义一个mode=“out-in”表示先出后进mode=“in-out”先进后出
tag 属性用来把这个动画渲染成什么元素 tag="div"
<style> 原始动画
.v-enter,v-leave-to { 动画的移动 }
.v-enter-active,.v-leave-active { 过渡效果 }
.v-move {移动的效果} 这个主要是用来解决当一个元素隐藏的时候,其他元素也会变动时的效果
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style> 添加appear的时候表示加载完成的时候也是用动画
<transition appear name="a" mode="out-in" > //=> 当有多个div需要添加动画的时候需要区分开来使用name
<div> //=> 添加name之后就会自动寻找匹配的样式 out-in表示动画先出后进
</transition>
+++==>> 引用animated.css
首先安装animated.css, 然后在main.js中引入, import animated from 'animated.css' Vue.vue(animated),在界面就可以直接使用.
<transition
appear
name="fade"
enter-active-class="animated zoomInLeft"
leave-active-class="animated zoomOutRight"
>
<div v-if="show">hello worlds</div>
</transition>
====》 动画钩子
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
可以把数据存放到json文件中，在控制台中输入JSON.stringify(要转换的数据)转换为json格式
操作dom
<h2 ref='foo'>我是ref的值</h2>要获取这个h2元素的文本，需要给此元素添加ref属性，并赋予名字
console.log(this.$refs.foo.innerHTML')值就是要获取的内容
this.$refs.foo.innerHTML=’我是新值‘改变他的值
