vue特性

1.Vue特殊特性
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取

2.ref使用
2.1在需要获取的元素上添加ref属性. 例如: <p ref="mypp">我是段落</>
2.2在使用的地方通过 this. $refs.xxx获取, 例如 this.$ ref.myppp

3.ref特点
ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件

        methods: {
            myFn(){
                // 注意点: 如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素
                // 注意点: 并且VUE官方并不推荐我们这样获取
                // console.log(document.querySelector("p"));
                // console.log(document.querySelector("#myOne"));

                // 在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取
                // 注意点: ref如果是添加给元素的元素, 那么拿到的就是元素的元素
                // ref如果是添加给自定义的组件, 那么拿到的就是自定义的组件
                console.log(this.$refs);
                console.log(this.$refs.myppp);
                console.log(this.$refs.myOne);
                console.log(this.$refs.myOne.msg);
                console.log(this.$refs.myOne.say);
            }
        },

1.Vue特殊特性
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取

2.ref使用
2.1在需要获取的元素上添加ref属性. 例如: <p ref="mypp">我是段落</>
2.2在使用的地方通过 this. $refs.xxx获取, 例如 this.$ ref.myppp

3.ref特点
ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件

1.Vue渲染组件的两种方式
1.1先定义注册组件, 然后在Vue实例中当做标签来使用
1.2先定义注册组件, 然后通过Vue实例的render方法来渲染
2.两种渲染方法的区别
1.1当做标签来渲染, 不会覆盖Vue实例控制区域
1.2通过render方法来渲染, 会覆盖Vue实例控制区域

Vue CLI

1.什么是Vue-CLI(Command Line Interface)?
Vue-CLI是vue官方提供的脚手架工具,
默认已经帮我们搭建好了一套利用webpack管理vue的项目结构

2.如何安装Vue-cli和使用Vue-CLI?
安装脚手架工具: npm install -g @vue/cli
检查是否安装成功: vue --version
通过脚手架创建项目: vue create project-name

3.通过Vue-CLI生成的项目结构解读

3.1在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹
这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置
3.2在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue

node_modules文件夹: 存储了依赖的相关的包
public文件夹: 任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们,一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库
src文件夹: 代码文件夹
|----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
|----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
|----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)
|----router文件夹: 存储VueRouter相关文件
|----store文件夹: 存储Vuex相关文件
|----App.vue:根组件
|----main.js:入口js文件

Vue配置

Vue-CLI为了方便起见对webpack原有的属性进行了一层封装, 如果我们需要修改webpack的配置，那么我们可以在项目中新建一个vue.config.js的文件, 然后去查询Vue-CLI的封装是否能够满足我们的需求

如果可以满足我们的需求, 那么就使用Vue-CLI封装的属性来修改webpack的配置
如果不可以满足我们的需求, 那么我们可以通过configureWebpack的属性来编写原生的webpack配置

const path = require('path');
const webpack = require('webpack');
module.exports = {
  // output: {
  //   path: path.resolve(__dirname, 'bundle')
  // }
  outputDir: 'bundle',
  configureWebpack: {
    // 就可以在这个对象中编写原生的webpack配置
    plugins: [
      new webpack.BannerPlugin({
        banner: '为中华之崛起而读书'
      })
    ]
  }
}

vue补充知识点

vue补充知识点

vue特性

Vue CLI

Vue配置

推荐阅读更多精彩内容