vue.js简介
概念:构建用户界面的渐进式框架。
(渐进式:不必一开始就用Vue所有的全家桶,根据场景,官方提供了方便的框架供你使用。)
Vue 的核心库只关注视图层。
【引入vue】
可以创建一个 .html,然后通过如下方式引入 Vue:
安装脚手架:
Project name 【输入项目名】
Project description 【项目描述】
Use ESlint to lint your code? 【代码检查】
Set up unit tests 【测试】
Setup e2e tests with Nighwatch? 【测试】
在通过npm安装项目后,我们需要对其目录进行解析:
(1) Build:项目构建(webpack)相关代码;
(2) config:配置目录,包括端口号等。
(3) node_modules:npm加载的项目依赖模块
(4) src:这个目录当中的内容包含了我们基本上要做的事情,这里包含了几个文件:
(一)assets:存放图片
(二)components:存放组件文件
(三)App.vue:项目入口文件,组件也可以直接写在这里不适用components
(四)main.js:核心文件
(5) static:静态资源目录
(6) test:初始测试目录
(7) .xxxx:配置文件,包括git配置和语法配置等
(8) index.html:首页
(9) package.json:项目配置文件
(10) README.md:说明文档
兼容性:
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
【创建vue实例】
【生命周期函数】
1.beforeCreate 创建前执行(data和el都还未初始化)
2.create 完成创建 (完成了data数据初始化,el还未初始化)
3.beforeMount 载入前(完成了data和el数据初始化)
4.mounted 载入后html已经渲染(ajax请求可以放在这个函数中)
5.beforeUpdate 更新前状态(view层的数据变化前,不是data中的数据改变前)
6.update 更新状态后
7.beforeDestroy 销毁前
8.destroy 销毁后 (Dom元素存在,只是不再受vue控制)
模板语法
插值表达式:{{ msg}}
v-html:动态注入标签,注意:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
v-bind:动态绑定一个或多个html属性,绑定时注意属性前加冒号:disabled/:id
v-if:条件判断,根据真假判断条件符合即渲染结果。在切换时元素及它的数据绑定 / 组件被销毁并重建。
v-else:限制:前一兄弟元素必须有 v-if
或 v-else-if
。
v-else-if:前一兄弟元素必须有 v-if
或 v-else-if
。
v-on:用来监听事件,绑定事件 (可缩写为@click)
阻止默认事件:【v-on:click.prevent="go(index,$event)"】
阻止默认事件冒泡:【v-on:click.stop="go(index,$event)"】
只生效一次:【v-on:click.once="go(index,$event)"】
键盘事件监听:【v-on:keyup.enter="write"】
v-text: 更新元素的 textContent
。如果要更新部分的 textContent
,需要使用 {{ Mustache }}
插值。
v-show:根据表达式之真假值,切换元素的 display
CSS 属性。
v-for:基于源数据多次渲染元素或模板块,v-for
指令需要使用 item in items
形式的特殊语法。最好加上:key
v-model:在表单控件或者组件上创建双向绑定。
v-once:只渲染元素和组件一次。
【v-if有更高的切换开销,v-show有更高的初始渲染开销,频繁切换使用v-show,条件很少改变使用v-if】
特殊特性
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
最常见的用例是结合 v-for
计算属性
有侦听的效果,写在计算属性中的方法可以直接在插值表达式中使用;
绑定class
上面的语法表示 active
这个 class 存在与否将取决于数据属性 isActive
的 状态。
v-bind:class
指令也可以与普通的 class 属性共存,例如:
全局API
filter:
例:
data(){
nums:[1,2,3,4,5,6,7],
},
methods:{
getOdd(){
this.nums.filter(function(num){
if (num % 2 !==0){
console.log(num);}})
}}
component:
其他:
watch只能监听一个对象
computed可以对多个对象进行监听
安装配置路由
1 npm install --save vue-router
2 main.js下:import router from './router',new Vue里添加router
3 index.js里:import Router from 'vue-router'
Vue.use(Router)
4 视图加载的位置:<router-view></router-view>
5 实现类似选项卡或者锚点链接的功能 用于组件间的跳转 使用标签 进行跳转
<router-link to="/words">words</router-link>
6 在index.js注入的地方加上:redirect:"/test2/test1", 即默认显示哪个子页面
7 【路由点击高亮效果】 全局:
index.js里面给全局添加一个class名,然后全局都可以使用这个class 在export default new Router里写:linkActiveClass: "active",
然后在想要路由点击高亮的页面style里: .active{ color: red; }
懒加载
安装:cnpm install vue-lazyload --save-dev
引入在main.js中: import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
在要加载的页面使用标签: <img v-lazy="imgUrl"/> imgUrl为data中的数据
使用swiper
1 cnpm install --save vue-awesome-swiper
2 main.js里:
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
使用element
1 npm i element-ui -S
2 main.js里:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
引入jQuery
1 npm install jquery --save-dev
2 在build/webpack.base.conf.js中添加如下内容:
3 在src/main.js文件中 引入jquery或在单页面中引用
import $
from
'jquery'
4 npm run dev
5 mounted()里调用
vue安装Bootstrap
1、安装bootstrap,使用命令npm install bootstrap --save-dev
2、在package.json文件中引入bootstrap这个模块
3、在src/main.js文件中 引入jquery