dVue.js是类似于angular.js的一套构建用户界面的渐进式框架，只关注视图层， 采用自底向上增量开发的设计。
Vue.js的代码需要放置在指定的HTML元素后面。
关于Vue的数据绑定：
例子：
<div id="app"> {{a}} </div>
new Vue({
el:"#app", //使用选择器找到绑定数据的模块
data:{
a:"hello world" //数据内容
}
})
防止刷新看到花括号的方法：在父元素添加v-cloak 是一个样式，添加后在CSS里定义
[v-cloak]{
Display:none;
}
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html // 转义HTML文本
关于Vue的双向数据绑定：使用v-model
例子：
<div id="app">
{{a}}
<input type="text" v-model="a"/>
</div>
new Vue({
el:"#app",
data:{
a:"hello world" //数据内容
}
})
如果不想页面上的数据随着输入值改变，可以加* 输入改变数据后，页面不会改变。数据只绑定一次 {{a*}} 页面加载的时候进行数据绑定，后面数据更改页面不变化
HTML转意输出 {{{msg}}} 在js中定义的HTML语法，会直接在页面生成
例子;
<div id="app">
{{a*}}
<input type="text" v-model="a"/>
</div>
关于Vue的事件绑定：使用v-on
后面跟各种事件：v-on:click/mouseout/mouseover/dblclick/mousedown.....
可以简写为 @click=""
例子：v-on:click="函数"
事件对象: $event 封装了的事件event 表示当前鼠标点击对象
@click="show($event)"
事件冒泡:
阻止冒泡: 在事件后面加上 .stop
ev.cancelBubble=true; 使用 $event 后定义在方法中
@click.stop推荐 @click.stop=“方法” 原生写法
默认行为(默认事件): 在事件后面加上 .prevent
阻止默认行为:
ev.preventDefault();
@contextmenu.prevent推荐
键盘事件:
@keydown 敲打键盘任意键触发（显示前） 后面可以直接.序号表示按某个键@keyup 敲打键盘任意键触发（显示后）
$event.keyCode 键盘触发事件对象，即该按键的序号在方法中传入事件对象
常用键:
回车
a). @keyup.13 // 13表示按键的键盘序号
b). @keyup.enter 推荐
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17; // ctrl 是按键名称
//声明某个按键的序号，即可以在后面使用@keydown /@keyup .按键名调用
关于Vue的事件绑定：使用v-bind
v-bind:src="" 后面跟各种属性，如src/class/style.....
简写: :src="url" 后面可以直接写data里的数据名称
Class后面带的可以是一个数组，也可以是一个对象，或者直接一个json文件
例子：
<strong :class="json">文字...</strong>
<strong :class="[e,red]">文字...</strong>
<strong :class="{red:true,blue:false}">文字...</strong>
关于Vue的列表输出：使用v-for
相当于angular的ng-repeat，不过不需要var
例子：
<ul>
<li v-for="n in todos">{{n.text}}</li>
</ul>
new Vue({
el:".app",
data:{
todos:[
{text:"第一个数据"},
{text:"第二个数据"},
{text:"第三个数据"},
]
}
})
$index :表示遍历的索引下标，默认从0开始
$key：表示遍历json数组时的key值
v-for="(k,v) in json" 这样的写法会在页面同时输出key值和value值
当数组数据有重复时，使用v-for会报错，需要添加track-by='$index/uid'
关于Vue的条件判断：使用v-if v-else 控制元素显示或者隐藏
例子：
<div v-if="true">为true时显示</div>
<div v-else>否则这个显示</div>
v-show:类似于v-if 不过隐藏时也会占据页面空间
v-on: 绑定一个事件,后面跟随触发类型
例子：
<button v-on:click="revr">Reverse Message</button>
var app5 = new Vue({
el: '#app-5',
methods: {
revr: function () {
this.message = this.message.split('').reverse().join('') //使用Vue内部的变量，需要使用this
}
}
})
关于Vue的过滤器：跟angular一样也是使用 数据|格式
vue提供过滤器 : capitalizeuppercasecurrency....
数组数据配合使用的过滤器:
limitBy：限制几个 即数组遍历显示的时候限制显示几个，后面带两个参数
limitBy 取几个 从哪个下标开始 如：limitBy 2 3
filterBy：过滤数据，将包含某个数据的内容显示
filterBy 包含的内容 如：filterBy a
orderBy：排序，将数组内容排序显示，后面两个参数
1表示正序，-1表示倒序
orderBy 按照什么排序 1/-1 如： orderBy 'o'
例子：
{{data | uppercase}} //转化为大写
val in arr | limitBy 2 //只显示两个数据
val in arr | filterBy a //只显示包含数据a的内容
val in arr | orderBy 'o' //以o数据位置为标准进行排序显示
Vue.filter:自定义转化格式,，需要在js中使用Vue.filter定义，可以改变数据的格式、内容等
Vue.filter('name', function (value) { //定义格式转化名称name，传入参数值value
return value.split('').reverse().join('') //重新定义数据内容并return 返回
})
时间过滤器：
Vue.filter('date',function(input){
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
});
双向过滤器：使用在v-modul 绑定数据的过滤
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //view -> model
return val;
}
});
关于Vue的数据交互： 引入: vue-resource
引入vue-resource.js文件，使用this.$http
get方式:
获取一个普通文本数据：不需要传参数的时候
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
then（） : 里面跟两个方法，第一个为请求成功，第二个为失败
res： 传入方法内，表示请求返回的数据
res.data：表示请求返回的数据内容
给服务发送数据：需要传参数的时候
this.$http.get(this.$root.api+'/Index/Staff/training',{params:{ //传递的参数必须为一个对象，使用params
subject_field_id:1, //表示传参数过去，值为1
train_state:2
}}).then(function(res){
console.log(res.data);
},function(res){
alert(res.status);
});
get():请求方式括号内带一个对象，对象内容为传过去的参数
post方式：在请求方式括号内增加一个对象 { emulateJSON:true }
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp方式：跨域请求，请求地址为外域网站
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a' //传过去的参数
},{
jsonp:'cb' //更改callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
第四种方式：默认是get提交
this.$http({
url:地址
data:给后台提交数据,
method:'get'/post/jsonp 提交方式
jsonp:'cb' //cbName 如果是jsonp提交方式，声明名称
});
关于Vue的生命周期：vue内部执行过程
new Vue({})声明了一个对象，也叫钩子函数
Vue内部会自己经历四个阶段：可以在后面跟方法
created： 当new Vue执行后，即实例已经创建时执行
beforeCompile：当开始编译HTML页面所有的Vue语法之前执行
compiled： 当编译HTML页面所有的Vue语法结束之后执行
ready： 当编译结束后把所有元素挂到Dom树，即插入到文档中后执行
Vue可以通过new声明创建，也可以进行销毁，使用$destroy
销毁后会经历两个阶段：
beforeDestroy: 销毁之前
destroyed: 销毁之后
例子：
var vm=new Vue({ });
document.onclick=function(){
vm.$destroy(); /*点击页面销毁vue对象*
};
关于Vue的计算属性：类似data数据
同样是一个数据，不过后面跟的是function的写法，放置逻辑代码，使用return返回值，没有使用return返回值，则该数据为空
一般情况下，只使用get返回的数据，无法在后期通过其他办法更改值
* computed里面可以放置一些业务逻辑代码，一定记得return
有两种写法：
computed:{
b:function(){ //默认调用get
return 值
}
}
完整写法：
computed:{
b:{
get:function(){
return this.a+2;
},
set:function(val){ //必须传入一个值
this.a=val;
}
}
}
监听数据变化 : vm.$watch 监听某个数据，发生改变时执行方法
vm.$watch(name,function); //name表示监视的数据名称，后面带方法
vm.$watch(name,fnCb,{deep:true}); //深度监视 ，监视对象是数组
关于Vue的实例简单方法：
因为var vm=new Vue({})等于实例化一个对象，所以可以通过 . 访问它的各个值
vm.$el-> 就是元素，可以直接获取el后面选择器的整个元素内容
vm.$data -> 就是data，获取data里的所有数据，返回数组
vm.$destroy-> 销毁对象
vm.$log();-> 查看现在数据的状态，即在控制台输出所有数据
vm.$mount -> 手动挂在vue程序，当没有声明el:”控制器”时使用
例子：
var vm=new Vue({
data:{
a:1,
b:2
}
}).$mount('#box');
vm.$options-> 获取自定义属性，即定义的各个数据或方法写在外部
例子：
var vm=new Vue({
aa:11, //自定义属性,
show:function(){
alert(1);
},
data:{
a:1
}
}).$mount('#box');
vm.$options.show();
console.log(vm.$options.aa);
关于Vue的自定义指令：Vue.directive
类似v-text v-for v-html 都称为Vue的指令，即扩展的html语法
可以通过Vue.directive自定义这些指令
Vue.directive('red',function(a){ //red为自定义的指令的名称
this.el.style.backgrund='red'; //this.el指使用该指令的元素
});
<span v-red> 内容 </span> //指令名称为red，这里需要使用v-
指令后面可以带参数，例如 v-text=“a”
a相当于在自定义的function传入的参数
自定义元素指令:（用处不大） Vue.elementDirective
Vue.elementDirective('zns-red',{ //自定义HTML标签zns-red
bind:function(){
this.el.style.background='red'; //定义该标签作用
}
});
<zns-red></zns-red>
关于Vue的动画：引入animate.css
最基本的动画：
//给需要添加动画的元素添加transition="名称"
例子：
<div id="div1" v-show="bSign" transition="fade"></div>
//在css样式里面进行定义
<style>
.fade-transition{ transition : 1s all ease; } //定义动画时间
.fade-enter{ opacity: 0; } //进入的动画
.fade-leave{ opacity: 0; transform: translateX(200px); } //离开的动画
</style>
推荐使用的动画：引入animate.css
animate.css是一个css动画库，可以在百度上直接下载，在页面引入
//给需要添加动画的元素添加transition="名称" class=”animated”
例子：
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
//在new Vue里面声明transitions对象并定义动画
new Vue({
el:'#box',
transitions:{
bounce:{ //动画的名称
enterClass:'zoomInLeft',
//进入时使用的动画的class，参考animate.css书册
leaveClass:'zoomOutRight' //离开时使用的动画的class
}
}
});
关于Vue的组件：Vue.extend Vue.component
vue组件:其实就是一个大的对象，例如new Vue就是一个组件
1. 全局组件 Vue.component定义在外部为全局组件
两种书写方式：
*组件里面放数据 : data必须是函数的形式，函数必须返回一个对象(json)；事件不变
<div id="box"> <aaa></aaa> </div> //自定义的HTML标签
<script>
var Aaa=Vue.extend({ // 赋值给变量Aaa
data(){
return { //组件内部的数据以对象的形式，需要return返回
msg:'ddddd' //定义数据
}
}
template:'<h3>{{msg}}</h3>' //使用Vue.extend定义一个模版，
});
Vue.component('aaa',Aaa); //使用Vue.component将aaa绑定到Aaa
//Vue.component定义在外部为全局组件
绑定后页面使用<aaa></aaa>相当于<h3>我是标题3</h3>
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
第二种书写方式：
Vue.component('my-aaa',{ //绑定
template:'<strong>好</strong>' //定义模版
});
var vm=new Vue({
el:'#box'
});
2. 局部组件 Vue.component定义在某个组件为局部组件
var Aaa=Vue.extend({ // 赋值给变量Aaa
data(){
return { //组件内部的数据以对象的形式，需要return返回
msg:'ddddd' //定义数据
}
}
template:'<h3>{{msg}}</h3>' //使用Vue.extend定义一个模版，
});
var vm=new Vue({
el:'#box',
components:｛ //在new Vue里面将aaa绑定到Aaa，为局部组件
“aaa” : Aaa
｝
});
第二种书写方式：
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{ //自定义的标签,<my-aaa></my-aaa>
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'<h2 @click="change">标题2->{{msg}}</h2>'
} //定义模版
}
});
配合模版：定义的模版比较复杂时，可以在其他位置定义，
然后在template绑定id
两种书写方式：
第一种.
<script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
第二种.
<template id="aaa">
<h1>标题1</h1>
<ul><li v-for="val in arr">{{val} }</li> </ul>
</template>
动态组件：可以通过js动态更改页面上的组件模版
<component :is="组件名称"></component>
<component :is="a"></component>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{ template:'<h2>我是aaa组件</h2>' }, //定义模版
'bbb':{ template:'<h2>我是bbb组件</h2>' }
}
});
</script>
组件的嵌套：组件里面可以嵌套另一个组件
var vm=new Vue({
el:'#box',
components:{ //父级组件
'aaa':{
template:'<h2>我是aaa组件</h2><bbb></bbb>',
//子级组件定义的标签在父级模版使用
components:{ //子级组件
'bbb':{ template:'<h3>我是bbb组件</h3>' }
}
}
}
});
组件之间的数据交互：
子组件获取父组件的数据：props
:mmm.sync表示同步数据，即子组件数据改变，父组件数据也改变
<template id="aaa"> //父组件的模版 <h1>11111</h1> <bbb :mmm="msg2"></bbb> //子组件的内容，msg2为父组件的数据，绑 </template> 定到自定义的名称上
components:{ //这个为子组件
'bbb':{
props:['mmm'], //使用props 自定义名称 mmm
template:'<h3>我是bbb组件->{{mmm}}</h3>' //使用自定义的名称
}
父组件获取子组件的数据：vm.$emit(事件名,数据);
需要子组件自己触发事件发射数据
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
<bbb @child-msg="get"></bbb> //使用定义的事件名，触发父组件的方法
</template>
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send"> //触发事件发射数据
</template>
methods:{ get(msg){ this.msg=msg;} //父组件的方法，接收子组件发射的数据
methods:{
send(){ this.$emit('child-msg',this.a); } //子级组件内的一个方法，使用$emit
} // child-msg为事件名，this.a为子组件的数据
<slot></slot> ： 保留组件模版内原本的HTML文本
组件内部的HTML文本默认会被定义的模版内容覆盖，使用slot可以保留原本的HTML文本，当需要多个slot分别代表多个HTML文本时，可以设置slot值和name值一致
例子：
<ul slot="ul-slot"></ul> <slot name="ul-slot"></slot>
关于Vue的路由跳转：<router-view></router-view>
需要在页面引入vue-router文件，然后在自定义的js文件中配置路由
例子：
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
const Foo = { template: '<div>foo</div>' } // 定义（路由）组件并编写HTML内容
const Bar = { template: '<div>bar</div>' } // 可以从其他文件 import 进来
// 2. 定义路由
const routes = [
{ path: '/foo', component: Foo }, //定义路由的名称，以及路由跳转的位置
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes，后面也可以跟一个对象数组
})
// 4. 创建和挂载根实例。页面的data数据内容以及methods方法在这里面编写
const app = new Vue({
router
}).$mount('#app')
</script>
关于Vue使用了脚手架后自动创建环境的路由跳转：
Vue.js提供了自己的脚手架vue-cli，用于自动生成vue.js模板工程。即使用该脚手架会自动安装好webpack打包需要的所有模块等等。安装vue-cli之前，需要先安装了vue和webpack。
安装vue-cli步骤：在命令行输入以下指令
npm install -g vue-cli //全局安装vue-cli
vue init webpack projectName //生成项目名为projectName的模板，这里的项目名可以自定义
cd projectName //打开模板
npm install //初始化安装依赖
npm run dev //运行项目 可自动打开项目并实时更新
npm run build //执行发布打包 为代码编写完成后的最后步骤
代码编写：
初始化安装依赖后项目目录如下：
Index.html文件为总页面。需要从外部引入的css等文件在这里引入
打开src文件夹，
Components文件夹内的各个vue文件为各个单页面，各单页面在这个文件夹里面编写，样式和js代码全部写在一起。
//HTML代码编写在<template>标签的div内，必须使用一个div作为父容器
//js代码编写在<script>标签的export default 对象里面，data数据需要return到外部才可以使用，事件对象还是写在methods对象里面
//该页面的样式全部写在<style>标签里面
例子：
<template>
<div id="app">
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/">Go to main</router-link>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
todos:[
{text:"sddfsdf"},
{text:"dsf"},
{text:"sdfsdf"},
],
message:"IS my work"
}
},
methods:{
revr: function () {
this.message = this.message.split('').reverse().join('')
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>
Router文件内有一个index.js文件，里面编写的是该项目的路由
使用import从外部引入各个单页面文件（vue文件），不需要加vue后缀
在routes对象数组内设置路由，每个路由为一个对象
例子：
import Vue from 'vue'
import Router from 'vue-router'
import Hello from 'components/Hello'
import Foo from 'components/Foo' //引入单页面文件
import Bar from 'components/Bar'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
},
{
path: '/foo',
name: 'Foo',
component: Foo
},
{ //配置路由
path: '/bar', //路由的链接
name: 'Bar',
component: Bar //路由的名称
}
]
})
App.vue文件为页面默认跳转页面。可以根据情况修改内容
关于如何在vue-cli里面配置默认路径的简写方式：
在build文件夹中的webpack.base.conf.js中，alias里进行相关配置
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'base': path.resolve(__dirname, '../src/sass/base/_base.scss')
}
},
集成vue+ts 开发环境配置
1.完成vue-cli 下载后，安装TypeScript相关依赖和项目其余依赖
# npm install typescript ts-loader --save-dev
# npm install
安装官方插件vue-class-component，vue-property-decorator
npm install vue-class-component，vue-property-decorator --save-dev
2.修改目录下bulid/webpack.base.conf.js文件，在文件内module>rules添加以下规则
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
修改入口文件
entry: {
app: './src/main.ts'
}
resolve部分
extensions: ['.js', '.vue', '.json', '.ts', '.tsx']
3.在src目录下新建一个文件vue-shims.d.ts，用于识别单文件vue内的ts代码
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
4.在项目根目录下建立TypeScript配置文件tsconfig.json
{
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"allowJs": true,
"module": "es2015",
"target": "es5",
"moduleResolution": "node",
"experimentalDecorators": true,
"isolatedModules": true,
"lib": [
"dom",
"es5",
"es2015.promise"
],
"sourceMap": true,
"pretty": true
}
}
5.重命名src下的main.js为main.ts， .vue文件的<script>改为 <script lang="ts">
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Watch } from 'vue-property-decorator'
@Component
export default class Hello extends Vue {
msg: string = 'this is a type' get productIdsString() {
const arr = [1,2,3,4]
return arr.join('_')
} @Watch('msg')
onSidChange() {
this.tets()
} tets() {
alert('dsdsd')
} cheng() {
this.msg = '45654654654'
}
}
</script>
如何将vue文件中的css 和 js 分离
1. js中引入 Component 和vue文件
import { Watch, Component } from 'vue-property-decorator'
2.在 Component中声明引入的vue文件
@Component({
mixins: [Template],
})
3 路由引入直接指定到目录即可
import HelloWorld from '@/components/Hello'