vue.js入门

最新推荐文章于 2022-12-02 17:31:35 发布

HaNiNg_csdn

最新推荐文章于 2022-12-02 17:31:35 发布

阅读量317

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.csdn.net/weixin_38676273/article/details/84074328

版权

Vue.js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

写于参与联想项目第一天,vue.js es6语法 webpack掌握的很混乱,借此机会整理一下

用vue-cli搭建vue开发环境

入口

项目入口是根目录下index.html
在这里插入图片描述
index.html中定义了id='app’的挂载点,src目录下的main.js中定义了vue根实例,该实例挂载到这个挂载点上.

import Vue from 'vue' 
import App from './App' //1

new Vue({
  el: '#app',
  router,
  store,
  components: { App },//2
  template: '<App/>',//3
  render: c => c(App)
})

1处省略了后缀名,webpack打包时会自动添加,在bulid/webpack.base.conf.js中配置,还可以配置别名.

另外这个import 是es6的语法,用于引入组件

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/statics/css/vars.scss'
    }
  },

2处注册局部组件,组件键值相同省略,这是ES6的语法
3处为模板,模板中的内容相当于放在挂载点下,这里使用了刚才注册组件APP
所以这个Vue根实例的作用就是展示所有APP组件和模板的内容
在这里插入图片描述

Vue文件:

每一个vue文件都是一个局部组件,组件包含模板,逻辑(js代码),样式三块.
js代码中:
以前声明data为属性,现在声明data为函数

以前:
data : {
	name:"ming"
}
//data为属性名,冒号之后为属性对象
-------------
现在:
data :function(){
	return {
		name:"ming"
	}
}
另外 ES6的语法中函数可以简化写作
data (){
	return {
		name:"ming"
	}
}
-----------------------------
要使用别的vue文件,即使用别的组件,要在js代码中注册局部组件
import TodoItem form './TodoItem'
components:{
	"todo-item":TodoItem
}