本文共 6678 字,大约阅读时间需要 22 分钟。
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
组件化和模块化的不同:var login = Vue.extend({ template: '登录
' }); Vue.component('login', login);
Document
Vue.component('register', { template: '注册
' });
Document
同时,需要使用 Vue.component 来定义组件:
Vue.component('account', { template: '#tmpl' });
Document 这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮
好用,不错!
这是私有的 login 组件
注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
data
需要被定义为一个方法,例如:Vue.component('account', { template: '#tmpl', data() { return { msg: '大家好!' } }, methods:{ login(){ alert('点击了登录按钮'); } } });
Document
data
属性中的值,需要使用this
来访问;Document
{ { count}}
components
属性定义局部子组件flag
标识符结合v-if
和v-else
切换组件Document
:is
属性来切换不同的子组件,并添加切换动画// 登录组件 const login = Vue.extend({ template: `` }); Vue.component('login', login); // 注册组件 const register = Vue.extend({ template: `登录组件
` }); Vue.component('register', register); // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { comName: 'login' }, methods: {} });注册组件
component
标签,来引用组件,并通过:is
属性来指定要加载的组件:Document
Document
props
属性来定义父组件传递过来的数据v-bind
或简化指令,将数据传递到子组件中:Document
getMsg
是父组件中methods
中定义的方法名称,func
是子组件调用传递过来方法时候的方法名称this.$emit('方法名', 要传递的数据)
方式,来调用父组件中的方法,同时把数据传递给父组件使用Document 这是 子组件
目标:主要练习父子组件之间传值
Document
- 评论人: { { item.user }} { { item.content }}
this.$refs
来获取元素和组件这是一个大大的H1
Document 哈哈哈, 今天天气太好了!!!
对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;
对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;
在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);
登录 注册
Vue.extend
创建组件// 4.1 使用 Vue.extend 来创建登录组件 var login = Vue.extend({ template: '登录组件
' }); // 4.2 使用 Vue.extend 来创建注册组件 var register = Vue.extend({ template: '注册组件
' });
// 5. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则 var router = new VueRouter({ routes: [ { path: '/login', component: login }, { path: '/register', component: register } ] });
// 6. 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', router: router // 使用 router 属性来使用路由规则 });
Document 登录 注册
{ path: '/register/:id', component: register }
var register = Vue.extend({ template: '注册组件 --- { {this.$route.params.id}}
' });
Document 登录 注册
this.$route.params
来获取路由中的参数:Document 登录 注册
children
属性实现路由嵌套Account
Document Account 这是 Account 组件
登录 注册
Document
watch
属性的使用考虑一个问题:想要实现 名
和 姓
两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)
Document + =
Document + =
data
中属性的改变:+ = { {fullName}}
登录 注册
Document 登录 注册
computed
计算属性的使用getter
的计算属性:+ = { {fullName}}
getter
和setter
的计算属性:{ {fullName}}
Document + + ={
{ fullname }}{
{ fullname }}{
{ fullname }}
watch
、computed
和methods
之间的对比computed
属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;methods
方法表示一个具体的操作,主要书写业务逻辑;watch
一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed
和methods
的结合体;nrm
的安装使用作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址;
什么是镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样;npm i nrm -g
全局安装nrm
包;nrm ls
查看当前所有可用的镜像源地址以及当前所使用的镜像源地址;nrm use npm
或nrm use taobao
切换不同的镜像源地址;注意: nrm 只是单纯的提供了几个常用的 下载包的 URL地址,并能够让我们在 这几个 地址之间,很方便的进行切换,但是,我们每次装包的时候,使用的 装包工具,都是 npm
转载地址:http://tnxmi.baihongyu.com/