vue查询学习笔记
Vue学习笔记
- 一、基础特性
-
- 1.1、实例及选项
-
- 1.1.1 模板
- 1.1.2 数据
- 1.1.3 方法
- 1.2 生命周期
- 1.3 数据绑定
-
- 1.3.1 文本插值
- 插值操作
-
- 内置指令
-
- v-once
- v-html
- v-text
- v-pre
- v-cloak
- 动态绑定属性 v-bind
- 二、webpack
-
- 2.1 安装
-
- 2.1.1安装：
- 2.1.2 运行vue
- 2.1.3打包
- 三、组件化
-
- 3.1创建组件构造器对象
- 3.2 组件注册
-
- 3.2.1 全局注册
- 3.2.2 局部注册
- 3.2.3 组测组件的语法糖
- 3.3 组件的data为什么必须要是函数
- 3.4 父组件向子组件传递数据——prop
- 3.5 子传父——$emit
- 3.6 slot插槽的基本使用
- 四、vue渲染页面的过程原理
- 五、发送http请求
-
- 5.1 添加http请求支持
- 5.2设置vue开发服务器的代理
- 5.3 调用http请求
- 六、不同页面间的参数传递
-
- 6.1 修改跳转方式1：使用事件
- 6.2修改跳转方式2：使用router-link
- 七、路由
-
- 7.1vue-router的安装配置
- 7.2vue-router的使用（懒加载）
- 7.3 vue路由获取参数
- 八、表单项目的绑定
-
- 8.1 v-model后缀词
- 九、打包
一、基础特性
1.1、实例及选项
通过创造一个实例：var vm = new Vue({})
1.1.1 模板
el:类型为字符串，DOM元素或函数。为实例提供挂载元素。
template:类型为字符串。默认将template值替换为挂载元素，且合并挂载元素和模板根节点的属性。
兄弟节点为根节点时需要一根节点将其包起。
<div id="app">
<p>123</p>
</div>
<script id="tp1" type="x-template">
<div class="tp1">
<p>This is a tpl from script tag</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
template: "#tp1"
});
</script>
</script>
1.1.2 数据
data: {
return{…}
}
不使用return包裹的数据会在项目的全局可见，会造成变量污染,使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
可通过引用Vue实例中的vm中的$data来获取生命的数据。
1.1.3 方法
methods :{}
1.2 生命周期
（来源：http://blog.csdn.net/mqingo/article/details/86031260）
1.3 数据绑定
1.3.1 文本插值
- Mustache语法{{}}
将元素当成纯文本输出 - 过滤器(vue2.0后内置过滤器已删除，需自己写)
格式：{{ name | filterA arg1 arg2}} - 指令
例：
插值操作
内置指令
v-if与v-for的优先级：v-for与v-if一起使用时，v-for优先。
v-once
dom元素只会渲染一次。
v-html
将元素当成HTML标签解析后输出
v-text
将元素当成纯文本输出，覆盖元素中原来的内容
v-pre
跳过这个元素和它的子元素的编译过程(直接输出“{{message}}”字符串)
v-cloak
先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果，只替换{{ msg }}占位符里面的内容；(解决加载延迟，数据刷新不及时{{message}}到变量值的闪动问题)
类似div开始有一个css属性display:none，加载完成之后，css属性display:clock，变成元素显示出来。
动态绑定属性 v-bind
用法 v-bind：属性名=“”
简写为 :属性名=“”
例：change
二、webpack
2.1 安装
2.1.1安装：
npm install --save -dev webpack
全局安装vue、vue-cli:
npm install vue vue-cli -g
2.1.2 运行vue
创建一个基于webpack模板项目：
vue init webpack my-project
运行：
cd my-project
cnpm install
npm run dev
2.1.3打包
npm run build
三、组件化
3.1创建组件构造器对象
// 1.创建组件构造器对象
const cpnc = Vue.extend({
template:`
/*......*/`
})
3.2 组件注册
3.2.1 全局注册
Vue.component('my-component-name', {
// ... 选项 ...
})
3.2.2 局部注册
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
3.2.3 组测组件的语法糖
注册组件时候可以不实例化组件对象，直接在注册的时候实例化。
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
// 1.注册全局组件语法糖
Vue.component('cpn1', {
template:`
全局组件语法糖
全局组件语法糖
`
})
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpn2:{
template:`
局部组件语法糖
局部组件语法糖
`
}
}
})
</script>
3.3 组件的data为什么必须要是函数
组件是可以被复用的，那么注册了一个组件本质上就是创建了一个组件构造器的引用，而真正当我们使用组件的时候才会去将组件实例化。这里可以发现当使用组件的时候，虽然data是在构造器的原型链上被创建的，但是实例化的component1和component2却是共享同样的data对象,当你修改某一个实例的data对象的一个属性的时候，公用的data对象也会发生改变。
data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。
3.4 父组件向子组件传递数据——prop
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名法)的 prop 名需要使用其等价的 短横线分隔命名 命名。
（在子组件上）
const cpn = {
template: "#cpn",
props: {
cmessage: {
type: String,
default: 'zzzzz',
required: true //在使用组件必传值
}
}
}
属性：
- type：类型，若类型是Object/Array，默认值必须是一个函数
- default：默认值
- required：必传值
- vaildator：自定义验证函数
3.5 子传父——$emit
vm.$emit( event, arg ) //触发当前实例上的事件
例：
<!-- 父组件 -->
<div id="app">
<!-- 不写参数默认传递btnClick的item -->
<cpn @itemclick="cpnClcik"></cpn>
</div>
<!-- 子组件 -->
<template id="cpn">
<div>
<button v-for="(item, index) in categoties" :key="index" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
// 父传子：props
const cpn = {
template: "#cpn",
data() {
return {
categoties: [{
id: 'aaa',
name: '热门推荐'
},
{
id: 'bbb',
name: '手机数码'
},
{
id: 'ccc',
name: '家用家电'
},
{
id: 'ddd',
name: '电脑办公'
},
]
}
},
methods: {
btnClick(item) {
this.$emit('itemclick', item)
}
},
};
const app = new Vue({
el: "#app",
data() {
return {
}
},
methods: {
cpnClcik(item) {
console.log('cpnClick'+item.name);
}
},
components: {
cpn
},
})
</script>
1.在子组件中定义一个方法btnClick(item)，使用$emit，'itemclick’是事件名，item是传过去的值。
methods: {
btnClick(item) {
this.$emit('itemclick', item)
}
},
2.在子组件中监听点击事件并回调此方法
<div>
<button v-for="(item, index) in categoties" :key="index" @click="btnClick(item)">{{item.name}}button>
div>
3.在父组件中定义一个方法cpnClcik(item)
methods: {
cpnClcik(item) {
console.log('cpnClick'+item.name);
}
},
4.并在父组件（vue实例）中调用itemclick的子组件传过来的事件。
<cpn @itemclick="cpnClcik"></cpn>
3.6 slot插槽的基本使用
具名插槽：
<slot name="left">左边</slot>
<slot name="center">中间</slot>
<slot name="right">右边</slot>
<slot>没有具名的插槽</slot>
<cpn>
<span>没具名</span>
<span slot="left">这是左边具名插槽</span>
<!-- 新语法 -->
<template v-slot:center>这是中间具名插槽</template>
<!-- 新语法缩写 -->
<template #right>这是右边具名插槽</template>
</cpn>
四、vue渲染页面的过程原理
渲染过程1：js入口文件
./build/webpack.base.config.js是webpack打包的重要配置文件，其中：
module.exports = {
entry: {
app: './src/main.js' //这里就定义了vue.js的入口文件
},
}
渲染过程2：index.html
渲染过程3：main.js中的vue定义
渲染原理与实例：
vuejs即为最典型的Ajax工作方式，即渲染部分页面。
五、发送http请求
5.1 添加http请求支持
import VueResource from 'vue-resourser'
Vue.use(VueResource)
5.2设置vue开发服务器的代理
在config/index.js文件中添加：
module.exports = {
dev: {
proxyTable:{
'/api':{ //1.对有以”/api“开头的url做处理
target: 'http://siwei.me', //3.转发到siwei.me上
changeOrigin: true,
pathRewrite:{
'^/api':'' //2.把url中的'/api'去掉
}
}
}，
}
5.3 调用http请求
this.$http.get('.....').then((response)=>{...},(...)=>{...});
$http即可以发起http请求的对象；.get()可以发起get请求，只有一个参数目标url；
this.$http.post('...',{title:'',blog_body:''}).then((response)=>{...},(...)=>{...});
.post()第二个参数即为请求的body
六、不同页面间的参数传递
6.1 修改跳转方式1：使用事件
<template>
...
<tr v-for="blog in blogs">
<td @click='show_blog(blog.id)'></td>
</tr>
</template>
<script>
export default{
methods:{
show_blog: function(blog_id){
this.$router.push({name: 'Blog', query:{id: blog_id}})
}
}
}
</script>
6.2修改跳转方式2：使用router-link
七、路由
7.1vue-router的安装配置
1.使用npm install vue-router --save来安装vue-router插件模块
2.在模块化工程中使用他(因为是一个插件，所以可以通过Vue.user来安装路由功能
router文件夹中的index.js
/**
* 配置路由相关信息
* 1.先导入vue实例和vue-router实例
*/
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 2. 通过Vue.use(插件)，安装插件
Vue.use(Router)
//3. 创建 router路由对象
const routes = [
//配置路由和组件之间的对应关系
{
path: '/',//url
name: 'HelloWorld',
component: HelloWorld //组件名
}
]
const router = new Router({
//配置路由和组件之间的应用关系
routes
})
//4.导出router实例
export default router
main.js中挂载router对象
new Vue({
el: '#app',
router,//使用路由对象，简写对象增强写法
render: h => h(App)
})
7.2vue-router的使用（懒加载）
1.创建组件Home、About组件，导出
2.配置路由映射：组件和路径映射关系
修改index.js：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
// 2. 通过Vue.use(插件)，安装插件
Vue.use(Router)
//3. 创建 router路由对象
const routes = [
//配置路由和组件之间的对应关系
{
path: '/home',//home 前端路由地址
name: 'Home',
component: Home //组件名
},
{
path: '/about',//about 前端路由地址
name: 'About',
component: () => import('@/components/About') //懒加载组件
}
]
const router = new Router({
//配置路由和组件之间的应用关系
routes
})
//4.导出router实例
export default router
3.通过和使用路由
4.修改路由默认值
修改index.js的routes：
const routes = [
{
path: '',
redirect: '/home'//缺省时候重定向到/home
},
//配置路由和组件之间的对应关系
{
path: '/home',//home 前端路由地址
name: 'Home',
component: Home //组件名
},
{
path: '/about',//about 前端路由地址
name: 'About',
component: () => import('@/components/About') //懒加载组件
}
]
5.的其他属性
-
to属性：用于跳转到指定路径。 -
tag属性：可以指定 -
relapce属性：在history模式下指定replaceState而不是pushState，此时浏览器的返回按钮是不能使用的。 -
active-class属性：当router-link-active的class，设置active-class可以修改默认的名称。
6.通过$router属性修改路由跳转
7.3 vue路由获取参数
1.获取普通参数：query
对于/#/blogs?id=3中的参数：
this.$route.query.id //返回结果为3
2.获取路由中定义好的参数
对于/#/blogs/3 对应的路由应该是：
routes:[{
path:'/blogs/:id', //注意着的 :id
}]
上面的路由参数就可以这样获取：
this.$route.params.id //返回结果为3
八、表单项目的绑定
8.1 v-model后缀词
- .lazy
在用户对某个文本框进行输入的时候，等焦点彻底离开文本框时触发。
<input type="text" v-model.lazy='input_value'>
- .trim
对输入的值去掉前后的空格
九、打包
npm run build