2018-8-25
父子组件传递数据 - props
- 父组件通过子的属性值进行传递,方式有二:
- 常量: prop1=”常量值”
- 变量: :prop2=”变量名”
- 子组件需要声明
- 根据属性props:[‘prop1’,’prop2’]
- 在页面中直接使用{{prop1}}
- 在js中应该如何使用prop1?
- this.prop1获取
在父组件中: <template> <div> //引用子组件 <header-vue textOne="大"></header-vue> <body-vue :textTow="text2"></body-vue> <footer-vue></footer-vue> </div> </template> <script> //引入子组件对象 import headerVue from './components/header.vue' import bodyVue from './components/body.vue' import footerVue from './components/footer.vue' export default { data(){ return { text2: body, } }, methods:{}, props: [ 'textTwo', 'textOne' ] } </script>
- this.prop1获取
在子组件中: <template> <div> 我是{{textOne}}头 </div> <div > 我是body,{{textTwo}} </div> </template> <script> export default { data () { return {} }, methods: {}, //子组件接收父组件传来的值,在props中定义传来的变量 props: [ 'textOne', 'textTwo' ] } </script>
- 父组件通过子的属性值进行传递,方式有二:
声明全局组件
main.js <script> // 1. 引入vue import Vue from 'vue'; import App from './app.vue' // 2. 引入子组件对象 import headerVue from './components/header.vue' import bodyVue from './components/body.vue' import footerVue from './components/footer.vue' // 3. 声明全局组件 Vue.component('headerVue', headerVue); //注册一个组件,第一个参数是名称,在template中使用;第二个参数是实际的对象,显示成什么内容,具备什么功能 Vue.component('bodyVue', bodyVue); Vue.component('footerVue', footerVue); </script>
2018-8-21
- 父子组件的使用
在父组件中:
<template>
<div>
//引用子组件
<header-vue></header-vue>
<body-vue></body-vue>
<footer-vue></footer-vue>
</div>
</template>
<script>
//引入子组件对象
import headerVue from './components/header.vue'
import bodyVue from './components/body.vue'
import footerVue from './components/footer.vue'
export default {
data(){
},
methods:{},
//必需要声明
components:{
//组件名(在模板中使用) :组件对象
headerVue: headerVue,
body
}
}
</script>
- SPA结构?https://segmentfault.com/a/1190000000607661
- 微前端的设计理念与实践初探
2018-8-20
*methods和on
- 绑定事件的方法:
+ ‘v-on:事件名=”表达式||事件名”’
+ 简写:’@事件名=”表达式||事件名”’
- 韩树明没有参数是,可以省略(),只写一个函数名
- 在export default这个对象的跟属性加上methods属性,其是一个对象
+ key是函数名,也是函数体
- 在export default这个对象的跟属性上加上data,其是一个函数,返回一个对象
+ 对象的属性是我们初始化对象变量的名称
- 在script中能使用的对象,在template中也能使用;
在script中加this,在template中不加this
* v-for
- 可以使用操作数组(item,index)
- 可以使用操作对象(value,key,index)
- key 是类似于track by的属性,为了告诉vue,js中的元素与页面之间的关联,当试图删除元素的时候,是个单元的删除而不是替换,所以要关联其关系。
2018-8-19
vue中常用的v-指令
v-next
<span v-next="text"></span> <input type="text" name="" v-text="text"> data () { return { text:我是v-text玩的东西 } }
v-html 是元素的innerHTML,不能包含表达式{{}}
<span v-html="html"></span> data () { return { text: '我是v-text玩的东西', html: ` <ul> <li>xxx</li> <li>yyy</li> </ul> ` } }
- v-if 元素是否移除或者插入
- v-show
- v-model 双向数据绑定
JavaScript
v-model:
<input type="text" v-model="mTest">
{{mTest}}
<br>
v-bind:
<input type="text" v-bind:value="mTest">
- v-bind:value 给value赋值,v-bind是单向的,内部的改变影响显示的改变
class结合v-bind使用
- 需要根据可变的表达式的结果来给class赋值,就需用到v-bind:class=”xxx”
- class:结果的分类
- 取一个返回一个字符串(三元表达式和对象清单)
- 取多个,返回一个对象(样式做key,true和false做值)
v-bind:属性名=”表达式”,最终表达式的运算结果赋值给该属性名
- 简化的写法是:
:属性名="表达式"
//取一个 <div> <div v-bind:class="isRed?'red':'green'"></div> </div> isRed:true, <style> .red{ background: red; } .green{ background: green; } </style>
//取多个 <div v-bind:class="{'red':true,'big':'true'}">多个class</div> <style> .red{ background: red; } .green{ background: green; } .big{ font: 30px; } </style>
复杂例子:通过遍历,根据当前对象的成绩,匹配成绩和样式清单对象,用成绩做key,取对象的value,最终返回字符串做样式名
<ul> <li v-for="stu in stus" :class="{'A':'red','B':'green'[stu.grade]}"> {{stu.name}} </li> </ul> stus: [{name:'jack', grade:'A'},{name:'rose',grade:'B'}]
- 简化的写法是:
2018-8-13
- 对象属性的声明
var name = 'abc';
var person = {name}; // => var person ={name: name};
// 当属性的key和变量的名相同,而要使用变量的值做value。就可以简写成{name}
- 函数的声明(干掉了函数function)
var cal = {
add: function(){
return 1;
},
add2(){
return 2; // add1与add2相等
},
add3: function(n1,n2){
return n1 + n2;
},
add4(n1,n2){
return n1 + n2;
} // add3与add4相等
}
- vue单文件方式
- 单文件就是以.vue结尾的文件。最终通过webpack编译成.js在浏览器运行
- 内容: + +
- 1:template中只能有一个根节点
- 2:script中,按照exportdefault{配置}来写
3:style中,可以设置scope属性,让其只在template中生效
以单文件的方式启动
- webpack找人来理解你的单文件代码
- vue-loader, vue-template-compiler,代码中依赖vue
例子:
1. 挖坑
<body>
<div id="app"></div>
//以上是一个坑,vue文件写好之后往里填
</body>
2. 引入vue
import Vue from 'vue';
import App from './app.vue'
3. 创建vue实例。一般一个项目组都是一个实例来完成显示
new Vue({
//渲染内容的目的地
el: '#app',
//渲染内容
render: function(creater){ // render渲染,是个属性.
return creater(App); //App包含template/script/style,最终生成DOM结构
},
以上相当于 rander:'DOM结构'
//a. 当render:function参数为一个的时候,小括号可以省略
//b. 当代码只有一行且返是回值的时候,可以省略大括号
//c. 可以写成render: c => c(App)
data(){
}
})
<template>
<div id="app"></div>
</template>
<script>
export default {
}
</script>
<style scope>
</style>
- vue介绍
- my_project
- node_modules 文件都依赖于node_modules
- node包的查找机制是逐级向上查找
- 项目中就一个,对应src的使用
- src 存放人可以看懂的源代码,具有一定的功能划分,MVC
- 命令行:
- webpack立刻读取webpack.config.js文件,生成到dist目录下
- webpack-dev-server 运行src下的代码,虚拟出build.js测试
- 命令行:
- dist 存放真实上线的代码(减少请求,混淆代码),机器能看懂
- webpack.congig.js 打包生成dist下的代码
- package.json文件 包信息描述
- 里面全是依赖,如果没有,运行
npm i
(全部恢复) npm i --production
(只恢复dependencies)npm init-y
就能创建出package.json文件
- 里面全是依赖,如果没有,运行
- node_modules 文件都依赖于node_modules
2018-8-8
学习笔记:
$nextTick
2018-7-31
获取DOM元素
- 救命稻草,前端框架就是为了减少DOM操作,但是在特定情况下,也留了后门
- 在指定的元素上,添加ref=”名称A”
- 在获取的地方加入 this.$refs.名称A
- 如果==ref放在了原生DOM元素上==,那么获取的就是原生DOM对象
- 可以直接操作
- 如果==ref放在了组件元素上==,那么获取的就是组件对象
- 1: 获取到DOM对象,通过this. refs.名称. r e f s . 名 称 . el,进行操作
- 对应的事件
- created 完成了数据的初始化,此时还未生成DOM,无法操作DOM
- mounted 将数据已经装在到了DOM之上,可以操作DOM
- 如果==ref放在了原生DOM元素上==,那么获取的就是原生DOM对象
==ref放在了原生DOM元素上==
两个可能获取数据的过程:
- 组件创建后,数据已经完成初始化,但是DOM还未生成
created(){ console.log('====created:',this.$ref.myDiv); }
- 数据装载后,各种数据已经就位,将数据渲染到DOM上,Dom已经生成
mounted:{ console.log('==== mounted:',this.$refs.myDiv); //直接操作DOM this.$refs.myDiv.innerHTML = '哈哈'; //由于是双向数据绑定,还是操作数据比较好 this.text = "嘻嘻"; }
==ref放在了组件元素上==
mounted:{ console.log('====sub:',this.$refs.sub) //获取组件对象并获取到其DOM对象 //console.log('====sub:',this.$refs.sub.$el) //this.$refs.sub.$el.innerHTML = '嚯嚯'; }
app.js
项目的入口模块,一切的请求o都要先进入这里进行处理。调用router.js进行路由分发处理。
router.js
只负责分发路由,不负责业务逻辑处理。调用controller进行业务逻辑处理。
controller
只负责处理业务,不负责处理数据的CRUD。调用model层处理数据的CRUD。
model层
只负操作数据库,执行对应的sql。
view层
每当用户操作界面,,如果需要进行业务处理,都会通过网络请求去请求后端服务器,这个会被app.js检听到。
CRUD:
C: create
R: read
U: update
D: delete
MVVM
VM层是M层和V层之间的调度者:
M: M是保存的是每个页面中单独的数据
VM: 他是一个调度者,分割了M和V(M和V不能互相调用),每当v层想要获取或保存数据时,都要由VM做中间的处理。提供了数据的双向绑定。
V: V是每个单独页面的HTML结构
webpack属性配置
const path = require('path')
module.exports = {
enter:{ //main是默认入口,也可以是多入口
main: './src/main.js',
},
//出口
output:{
filename:'./build.js' //指定js文件
path: path.jion(_dirname, '..', 'dist') //代表当前目录上一级的dist
},
module: {
//一样的功能rules: webpack2.x之后新加的
loaders: [ //require('./a.css || ./a.js')
{ test: /\.(jpg|svg)$/,
loader:'style-loader!css-loader',
//顺序是反过来的 2!1
loader: 'url-loader?limit=4096&name=temp.[ext]',
//[name].[ext]是内置提供的,因为本身是先读这个文件
options: {
limit: 4096,
name: '[name].[ext]'
}
}
]
},
plugins:[
//插件的执行顺序是依次执行的
new htmlWebpackPlugin({
template: './src/index.html'
})
//将src下的template属性描述的文件根据当前配置的output.path,将文件移到该目录
]
}
多个插件之间用 ‘|’ 分割;多个loader之间用 ‘!’ 分割
webpack-ES6的处理
- ES6的模块,vue本身女神默认支持es6的模块导入
(import xxx from '../compontment'
) - babel
- babel-loadder(内部依赖babel-core)
- 关键字(presrts es2015)
- 函数(plugins babel-plugin-transpform-runtime)
- babel-loadder(内部依赖babel-core)
过滤器
- 组件内的过滤器就是option中的一个filters的属性(一个对象)
- 多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体
- 全局过滤器:
Vue.filter(名,fn)
- 总结
- 全局过滤器:范围大,如果出现同名时,权利小
- 组件内过滤器:如果出现同名时,权力大,范围小
//组件内过滤器
<template>
<div>
Please input
<input type="text" name="" v-model="text"/>
output: {{text | myFilter}}
</div>
</template>
<script>
export default {
filters: {
myFilter: funtion(value){ //value就是text
//输入的内容进行反转
//转换成数组->翻转数组->转换成字符串
return value.split('').reverse().join('');
}
},
data() {
return {
text: ''
}
}
}
</script>
//main.js
//全局过滤器
Vue.filter('myFilter',funtion(value){
return '我是全局过滤器';
}
- 全局过滤器和组件内过滤器都有时,++组件内过滤器起作用++。也就是更精准的起作用,可以类比css中的样式。
//app.vue
<template>
<div>
<sub-vue></sub-vue>
</div>
</template>
<script>
import SubVue from './sub.vue';
export default {
filters: {
myFilter: funtion(value) { //value就是text
//输入的内容进行反转
//转换成数组->翻转数组->转换成字符串
return value.split('').reverse().join('');
}
},
data() {
return {
text: ''
}
},
components: {
subVue: SubVue
}
}
</script>
//sub.vue
<template>
<div>
{{'大家好,我是sub | myFilter'}}
</div>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>