vue之vue2.x基础知识

1.vue的声明不可以绑定给body标签

2.vue的声明

3.vue的条件语句（为true的时候，显示，为false的时候隐藏）

Object.freeze() 阻止程序更新页面数据。

 

v-once 一次性插值

当出具发生改变的时候，插值处的内容不会更新。不好处就是 这将有可能影响到其他节点上的数据绑定。

 

v-on:click.prevent.self 阻止所有的点击事件。

v-on:click.self.prevent只会阻止元素本身元素的点击事件

v-on:click.once = '' 这个点击事件将只触发一次。

(1)if ...else....

v-if="true"

v-else="true"

 

(2)if.....else.if

v-if="true"

v-else-if

v-else

 

4. vue循环

数组循环（v-for="i in arr"）

对象循环（v-for="(k,v) in obj"）()

索引循环（v-for="(k,v,i) in obj"）

数组的索引循环 （v-for=“（v，i） in users”）

5.样式绑定（类名的添加）

v-bind:class = "{ active : isActive }"( isActive 是一个bol类型的值，false不添加，true为添加。active 为要添加的class )

 

6.声明vue 应用程序

new Vue({

el:' #myVue '//绑定给某个dom节点的vue程序

// 应用程序里的所有数据

data：{

}

// vue应用程序的所有函数

methods：{

}

//页面一加载就会自动执行的函数

created:function(){

}

})

7.vue 的事件绑定

( v-on:click=“ ” )点击事件

( v-on:click.self=“ ” )点击事件只在当前绑定元素上触发

8.事件修饰符

（1）阻止表单提交的时候页面刷新

( 2 )v-on:click.capture 添加事件监听时使用事件捕获模式显示

(即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。

就是谁有该事件修饰符，就先触发谁。并且是事件捕获触发。没有绑定的依旧执行事件冒泡)

div v-on:click.capture="fn1">1

div v-on:click.capture="fn2">2

div v-on:click.capture="fn3">3

div>

div>

div>

（3）键盘事件及其修饰符

v-on:keydown.alt.37 = " "; 键盘事件触发

9.vue 组键

(1) vue 使用组键：componet（'组键名称'，组键内容（对象））；

 

（2）vue组键的声明 必须在vue 实例化之前

（3）vue组键在文档里承接用 js 里组键的名称当做标签去承接

10.配置路由

( 1 )html 文档里路由的点击设置 采用 router-link to ="/标签名"

（2）

js 定义路由组键

const header = {template:'

header

'};const footer = {template:'

footer

'};

配置路由

const routes = {

{path:'/header',component:header},

{path:'/footer',component:footer}

}

实例化vue 配置路由的 routes

 

// 最后将实例化出来的 router 声明在 vue应用程序里、

 

【路由总流程如下】

 

vue脚手架全局安装终端命令

$ sudo npm install -g vue-cli

$ vue -V

$ vue init webpack vueproject

$ npm run dev

为了方便我们开发，还要安装一些其他的依赖模块，所以还要安装一次。

终端命令（当前的vue项目目录下）

$ npm install

安装路由的终端命令

$ npm install vue-router --save

$ npm install vue-resource --save

$ npm install axios --save

$ npm install jQuery --save

plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

new webpack.ProvidePlugin({

jQuery: "jquery",

jquery: "jquery",

$: "jquery",

"window.jQuery": "jquery"

})

]

【引入jquery】

import $ from 'jquery'

阻止单击事件冒泡

＜a v-on:click.stop="doThis"＞＜/a＞

提交事件不再刷新页面

＜form v-on:submit.prevent="onSubmit"＞＜/form＞

修饰符可以串联

＜a v-on:click.stop.prevent="doThat"＞＜/a＞

添加事件侦听器时使用事件捕获模式,,即谁设置谁优先触发

＜div v-on:click.capture="doThis"＞...＜/div＞

事件在该元素本身（而不是子元素） self自己

＜div v-on:click.self="doThat"＞...＜/div＞

配置路由

【承接】

＜router-link to="/header"＞Go to header＜/router-link＞

＜router-link to="/footer"＞Go to footer＜/router-link＞

【路由内容承接】

＜router-view＞＜/router-view＞

【路由配置】

vue使用组件:component('组件名称',组件内容(对象))

vue组件的声明必须放在vue实例化之前

Vue.component('test', {

template: `＜div＞

＜h1＞这是一个test组件＜/h1＞

＜h1＞这是一个test组件＜/h1＞

＜div＞`

});

//定义（路由）组件。

const header = {

template: '＜div＞我是header＜/div＞'

};

const footer = {

template: '＜div＞我是footer＜/div＞'

};

//配置路由

const routes = [{

path: '/header',

component: header

}, {

path: '/footer',

component: footer

}];

//创建 router 实例

const router = new VueRouter({

routes // （缩写）相当于 routes: routes

})

//实例化vue

new Vue({

router,

data: {

}

}).$mount('#myVue')