vue知识点
2.使用
// 1.下载
npm install vue --save：vue核心文件
// 注意：下面两个不是必须，需要就下载
npm install vue-resource --save：vue资源文件-ajax
npm install vue-router --save：vue路由
// 2.页面内使用
// HTML代码
<div id="box"></div>
// JS代码
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
// 实例化Vue对象（可以有多个实例，但是不推荐）
new Vue({
// 指定Vue作用范围
el: "#box"
})
</script>
注意事项：
1.Vue的内容都必须在在el属性值表示的标签范围内
2.一个页面中可以有多个vue实例,但是以后网页都是单页面，推荐写一个vue实例
3.不要将el设置为html和body
3.{{}}使用-数据输出
// Mustache语法
// 数据msg改变，插值内容将会更新
<span>message:{{msg}}</span>
// 只绑定一次
<span v-once>{{msg}}</span>
{{'hello world'}}：纯字符串
{{4*8}}：数字运算表达式
{{ num }}：变量（数据模型）
{{ num*price }}：变量（数据模型）运算
{{ boolean ? 'yes' : 'no' }}：三元运算符
{{data.join('->')}}：数组拼接
data=[1,2,3,4] 1->2->3->4
{{ msg.split('').reverse().join('') }}：字符串反转处理
// JS代码
new Vue({
el:"#box",
data:{
msg:"Hello world",
num:8,
price:3.99,
boolean:true,
data:['zhangsan','lisi','wangwu']
}
})
2.指令
指令里的字符都是变量
v-model="red" //此时red是变量，如果想输出red字符串，需要给red加引号v-model="'red'"
2.0 v-text:绑定文本
<span v-text="msg"></span>
等价于 <span>{{msg}}</span>
2.1 v-bind：绑定属性
// **下面写法 img数据不能解析
<img src="{{img}}">
// **v-bind绑定（此处“”内的img，title都是模型数据）
<img v-bind:src="img" alt="" v-bind:title="title">
// button按钮
<button v-bind:disabled="false">Button</button>：启用按钮
<button v-bind:disabled="true">Button</button>：禁用按钮
// 绑定自定义data属性
<h3 v-bind:data="msg">绑定自定义属性-绑定模型</h3>
// v-bind内容做字符串和变量值拼接
<div v-bind:title="'list-'+id"></div>
// **简写
<img :src="img" :title="title">
2.2 v-html
// 问题：{{}}只可以解释纯文本，写标签原形输出
// 解决办法：v-html绑定html标签内容输出
<div v-html="model"></div>
注意：
1.内部的数据绑定会被忽略
2.只对可信内容使用HTML插值，绝不要对用户提供内容插值，防止XSS攻击
2.3 v-model
<input type="text" v-model="message">
// v-model定义的message模型改变，h3内的{{message}}同步更新
<h3>{{message}}</h3>
注意：v-model定义的数据必须在data中定义
2.4 **v-if
// bool=true=>显示
// bool=false=>不显示
<h3 v-if="model">显示与不显示</h3>
// template:模板-views
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-if 满足条件则显示
不满足条件隐藏
v-else-if
必须和前面的v-if结合使用
v-else
当以上条件都不满足时，触发，只和最近的的v-if 或者是v-else-if搭配使用
2.5 v-for
**普通遍历
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
**数组遍历 value为值，key为索引
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
// 普通0-10循环
<span v-for="n in 10">{{ n }}</span>
// 模版遍历
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
2.6 v-show
// v-show="boolean"
<p v-show="boolean">v-show指令</p>
2.6.1 v-if和v-show区别
与v-if区别：
v-if：是vue在编译的时候，v-if="false"直接不会显示对应的代码,代码以注释形式存在浏览器中，并且不显示，只显示<!---->
v-show：v-show="false"仅仅是隐藏对应的代码
*********************
还有一个区别
<div v-show="isShow">
<video></video>
</div>
如果是v-show 即使退出这个div不显示了，视频仍然播放着，只不过在页面不显示，视频依然有声音
但是v-for就可以退出视频了
2.7 绑定事件:v-on
绑定多个事件
@mousedown="dragShow();moveShow()"
jquery阻止事件冒泡
1.return false
2.e.stopPropagation()
jQuery阻止默认行为
1.return false
2.e.preventDefault()
js中阻止事件冒泡
1.var e = ent || window.event;
e.cancelBubble = true
2.e.stopPropagation();
注意啦：在JS中不能使用return false阻止事件冒泡
JS中阻止默认行为
1.e.preventDefault();
2.return false;
<button v-on:click="show">点击</button>
// 简写事件格式
<button :click="show($event)"></button>
// 事件属性
new Vue({
el:'',
methods:function(e){
e.cancelBubble = true; // 阻止事件冒泡
e.preventDefault(); // 阻止默认行为
e.clientX/e.clientY // 鼠标事件属性
e.keyCode // 键盘事件属性
}
})
// 阻止事件冒泡方法2
@click.stop="show()"
@click.prevent="show()"
// 键盘事件特殊用法
@keyup.13="show()"
@keyup.enter/tab/delete/esc/space="show()"
@keyup.left/up/right/down="show()"
// 等价于@keyup.13="show()"
show:function(ev){
if (ev == 13) {
alert('您按回车了')
}
}
// 拖拽事件可以直接被使用
2.8 自定义指令
// 为什么用自定义指令(举例子)
Vue2.0中，代码复用的主要形式和抽象是组件，然后，有的情况下，你仍然需要对纯DOM元素进行底层操作，这就需要自定义指令
// 注册一个全局自定义指令 v-demo="color"
Vue.directive('demo', function(el, binding) {
// el：绑定的元素
// binding.value：绑定的值
el.style.backgroundColor = binding.value;
})
// 实例化Vue对象
new Vue({
el: '#box',
data: {
color: "yellow"
}
})
2.9区别
v-if和v-show的区别
v-if 是通过控制元素节点是否存在，控制元素的显示与隐藏
v-show 是通过控制元素的style.display 控制元素的显示与隐藏
v-html和v-text的区别
v-html 支持解析HTML标签
v-text 不支持解析HTML标签，将HTML标签全部以实体字符的形式显示，也就是标签原样输出
3.计算属性
任何复杂的逻辑运算，使用计算属性
// HTML标签代码
<div id="box">
<input type="text" v-model="num1">
<div>{{num1}}</div>
<div>{{num2}}</div>
<div>{{getNum2()}}</div>
<div>{{fullName}}</div>
<!-- 使用对象添加class对象 -->
<div v-bind:class="classObject">Hello world</div>
</div>
//实例化Vue
var app = new Vue({
el: '#box',
data: {
price: 0,
num: 0,
message: "hello world"
},
// 只讲计算属性，方法放在简书案例中即可
computed: {
// 计算属性不能出现在data数据中
total: function() {
console.log(this.price);
return this.price * this.num;
},
// 随时跟着message进行相应的变换
reverse: function() {
return this.message.split('').reverse().join('');
}
}
})
注意：
1.计算属性（computed）和方法（methods）都可以修改数据，但是计算属性依赖缓存提升效率，方法调用不会依赖缓存
2.观察对象watchers：当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的（官方demo-尝试做一个ajax的例子）
4.过滤器
//过滤器
Vue.filter('number', function(value) {
// 转换为浮点数
var num = parseFloat(value);
// 保留两位小数点
return num.toFixed(2);
})
// 格式化日期
Vue.filter('date', function(input) {
// 将个位数加前置0
function toZero(value) {
console.log(value);
if (value <= 9) return '0' + value;
else return value;
}
var oDate = new Date(input);
return oDate.getFullYear() + '-' + toZero((oDate.getMonth() + 1)) + '-' + toZero(oDate.getDate()) + ' ' + toZero(oDate.getHours()) + ':' + toZero(oDate.getMinutes()) + ':' + toZero(oDate.getSeconds());
});
5.表单控件绑定
6.Class与Style绑定
// HTML标签代码
// class绑定
<h3>1.:class="model"</h3>
<div :class="className">:class="model"</div>
<h3>2:class="{className:bool}"</h3>
<div :class="{red:bool}">:class="{className:bool}"</div>
<h3>3:class="arr"</h3>
<div :class="['red','fs']">3:class="object"</div>
// style样式绑定
<!-- 1.直接绑定样式 -->
<div :style="{width:'100px',height:'100px',background:'red'}"></div>
<!-- 2.直接绑定模型 -->
<div :style="style"></div>
<!-- 3.绑定数组 -->
<div :style="styleArr"></div></div>
//实例化Vue
new Vue({
el: '#box',
data: {
style:{
width:'150px',
height:'150px',
background:'#ddd'
},
styleArr:[
{width:'200px',height:'200px'},
{background:"blue"}
],
width:'50px'
}
})
3.created 实例化 mounted 挂载
created:function () {
console.log('vue实例化');
},
mounted:function () {
console.log('vue挂载');
}
// 无论先写挂载，还是实例化，首先执行实例化，其次执行挂载
4.组件
|注意：template:里的内容必须是一个标签，不能直接输出文本，如果需要输出多个标签，需要用一个标签在外进行包裹
组件：具有某个相对独立的功能的模块，
应用：一般由一个或多个组件进行组成
web开发的应用，SPA 单页面应用，只有一个页面
4.1全局组件
<div id="app">
<div class="show">
<!--显示的组件-->
<my></my>
<!--引入第二个组件-->
<two></two>
</div>
</div>
<script src="../dist/vue.js"></script>
<script>
// 全局组件
Vue.component('my', { // my自定的组件名
// template 模板 组件中有且只有一个标签，作为最外侧的容器，不能直接输出文本
template: `
<div>
<h3>我是h3</h3>
<h4>我是h4</h4>
</div>
`
})
</script>
4.2局部组件（子组件）
Vue.component('two',{
template:`
<div>
我是第二个组件,我要引用第一个组件
<my></my>
<child></child>
</div>
`,
// 子组件，局部组件
components:{
'child':{
template:'<h3>我是一个局部组件</h3>'
}
}
})
new Vue({
el: '#app',
})
5.路由router
路由：约定好的一种特定的访问方式！
直接引入vue-router.js文件
下载：npm install vue-resource --save：vue资源文件-ajax
npm install vue-router --save：vue路由
JS操作：
1.创建组件
2.约定路由规则，指定组件
3.创建路由实例
4.挂载路由
HTML操作：
1.设置路由链接
2.设置路由组件显示的区域
<body>
<div id="app">
<span>
// <router-link>类似a链接，固定写法
<router-link to="/index1">首页</router-link>
<router-link to="/me1">我的</router-link>
</span>
<div class="content">
<router-view></router-view>
</div>
</div>
<script src="../dist/vue.js"></script>
<script src="../dist/vue-router.js"></script>
<script>
// 创建组件
const index = {
template:`
<div>
<p>首页组件</p>
<ul v-for="(item,index) in goods">
<li>{{index+1}}</li>
<li>{{item.title}}</li>
<li>{{item.price}}</li>
</ul>
</div>
`,
// 路由里data必须是一个函数
data:function () {
return {
goods:[
{title:'可乐',price:2.50},
{title:'雪碧',price:2.50},
{title:'橙汁',price:2.50}
]
}
}
};
const me = {
template:'<p>我的组件</p>'
};
// 约定路由规则，指定组件
const routes = [
{
path:"/index1",
component:index
},
{
path:'/me1',
component:me
},
{
path:'/*',
// 重定向
redirect:index
}
];
// 创建路由实例
const router = new VueRouter({
routes:routes
});
new Vue({
el:'#app',
// 挂载路由
router:router
})
</script>
6.vue-cli vue-router vue-loader
vue-cli相当于脚手架 给你自动生成模板工程
vue-router是 vue路由插件 支持你单页应用的
vue-loader是webpack加载器，webpack下loader插件 可以把.vue文件转换为js模块
7.vue-loader
vue-loader是webpack加载器，webpack下loader插件 可以把.vue文件转换为js模块,这其中最最值得关注的是，它生成了 render function
coderender function code 是从模板编译而来（可以并且应该预编译）的组件核心渲染方法，在每一次组件的 Render 过程中，通过注入的数据执行可生成虚拟 Dom
<template>
...
</template>
<script>
...
</script>
<style>
...
</style>
8.vue-draggable 插件拖拽
npm install vuedraggable -D
// 引入拖拽插件
import Draggable from 'vuedraggable'
挂载组件
components: {
Draggable
},
应用组件
<draggable v-model="tags" :move="getdata" @update="datadragEnd">
<h3>是什么爱国讲述了过了我个我</h3>
<transition-group>
<div v-for="element in tags" :key="element.id">拖啊拖啊他拖他就哦啊图爱过几个；啊 {{element.name}}</div>
</transition-group>
</draggable>
9.v-touch 插件移动端触摸拖拽
下载cnpm install vue-touch@next
@next 下一个版本号，不写的话下载的是vue1.0的，写上下载1.0的下一个2.0
实例化
let vueTouch = require('vue-touch')
Vue.use(vueTouch, {name: 'v-touch'})
<!-- tab渲染一个标签，默认渲染div panright向右滑动-->
如果需要绑定多个 滑动，就直接写
<v-touch tag="div" v-on:panright="moveRight" v-on:panleft="moveLeft"></v-touch>
moveRight 和moveLeft 是定义的一个方法，在methods中写
因为vue-touch其实封装了 hammer.js的方法 其实我们这里介绍的也就是他几个事件；详情可以搜索 hammer.js的文档;
hammer.js主要针对触屏的6大事件进行监听。如下图所示：
1、 Pan事件：在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理：
Panstart：拖动开始、Panmove：拖动过程、Panend：拖动结束、Pancancel：拖动取消、Panleft：向左拖动、Panright：向右拖动、Panup：向上拖动、Pandown：向下拖动
2、 Pinch事件：在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件。该事件事以分别对以下事件进行监听并处理：
Pinchstart：多点触控开始、Pinchmove：多点触控过程、Pinchend：多点触控结束、Pinchcancel：多点触控取消、Pinchin：多点触控时两手指距离越来越近、Pinchout：多点触控时两手指距离越来越远
3、 Press事件：在指定的dom区域内触屏版本的点击事件，这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理：
Pressup：点击事件离开时触发
4、 Rotate事件：在指定的dom区域内，当两个手指或更多手指成圆型旋转时触发（就像两个手指拧螺丝一样）。该事件分别对以下事件进行监听并处理：
Rotatestart：旋转开始、Rotatemove：旋转过程、Rotateend：旋转结束、Rotatecancel：旋转取消
5、 Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。
Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动
6、Tap事件：在指定的dom区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。
10.vue 获取DOM元素ref
vue中获取DOM元素，不用像原生js那么麻烦
<div ref="recommend"></div> 在HTML中定义的时候需要写ref,才能调用
在script中调用
// 通过在html标签内写的ref来获取DOM,recommend需要和html中的ref的值对应
let nav = this.$refs.recommend
11.
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中
意思就是：用<keep-alive></keep-alive>包裹我们在vue项目中创建的组件，可以做到切换无刷新，保留缓存
当组件在 keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
12.访问的接口跨域解决方法
在npm官网下载jsonp 利用jsonp来解决跨域，
想要获取服务器数据：
1. 百度的页面请求百度服务器，直接ajax请求
2. 百度的页面跨域请求其他（贴吧，音乐等）数据中的三种方法
一种是：贴吧，音乐服务器允许百度页面直接请求，服务器端设置权限（这样可以直接通过ajax跨域请求数据）
一种是：通过jsonp，这得服务器配合使用
一种是：通过代理，让服务器模拟浏览器请求（本质是欺骗服务器）
13. 路由间数据传递
app.vue 父级
<router-link to="/tab/5572a109b3cdc86cf39001e3">热点</router-link>
<router-view></router-view>
router--index.js
routes: [
path: '/tab/:num',
name: 'tab',
component: Tab
]
调用数据
tab.vue 子级
this.$route.params.num
路由监听事件
$route(a,b) {console.log(a,b)} // 返回两个对象
14.exact
exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组件，exact能够使得路由的匹配更严格一些。
15.props父子间组件传递
15.1 父===》子
父级
<show :showList="showid"></show>
<script>
data () {
return {
showid: '传的参'
}
}
</script>
子级
<script>
props: ['showList']
</script>
调用 {{showList}} 便可打印
动态调用
watch: {
// 检测showList是否发生变化
showList () {
console.log(this.showList)
}
}
15.2 子===》父
子组件
在一个方法里写，比如单击按钮写
this.$emit('listenToChildEvent', false)
父组件
<show v-on:listenToChildEvent="showChild"></show>
<script>
methods: {
showChild (data) {
console.log(data) 便拿到到了子组件里的数据
}
}
</script>
16.打包apk
vue打包
1.运行生产模式 npm run build
如果出现Built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.
因为vue-cli的默认配置中, publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:
cd dist
npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了.
hs
奋斗就是每天很难，可是一年一年却越来越容易；
不奋斗就是每天很容易，可是一年一年却越来越难。
