Vue初级使用重点简介

一、Vue安装

Vue官方网站：https://cn.vuejs.org/v2/guide/

参考Vux教程：https://blog.csdn.net/weixin_41646815/article/details/79094196

https://blog.csdn.net/wwaenig521314/article/details/73469542

两篇一起参考，安装项目时eslint（语法校验）和test建议选择no，router（页面路由）建议安装，vuex(公共资源状态管理)建议安装

二、Vue主要文件

/---表示根目录

/index.html---主页（作用就是Vue项目最后打包生成的主页面）

/src/App.vue----主组件（Vue是以组件形式存在的，这是系统默认的主组件，打包后引入主页面）

/src/main.js-----主函数入口（主要是导包，构建vue组件对象）

三、Vue组件书写

1、template标签内容书写（书写类html代码）

2、script标签内容书写（书写类javascript代码）

3、style标签内容书写（书写css代码）

四、重点是script标签内的书写

1.数据区域

export default { 
  data () {
    return {
        message:'hello world' /*---这里声明赋值变量---然后在template区域使用{{message}}可以绑定内容显示和变量，得到修改数据，自动修改页面显示内容的效果*/
    } 
  }
}

2.初始化区域

/*------初始化区域主要是created和mounted,两者均可初始化，created比mounted先*/
created: function(){
    //todo init action
},
mounted: function(){
    //todo init action
}

3.函数区域

/*--computed是计算属性,methods是函数集,前者根据数据区域的变动计算结果,后者就是存放函数--*/
computed:{
    //存放带返回值的函数,根据数据动态计算结果,结果是数据,也可被template使用
},
methods:{
    //存放函数
}