0
点赞
收藏
分享

微信扫一扫

(一)基于IDEA的JAVA基础5

耳一文 2天前 阅读 1

1.全局组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    </script>
</head>

<body>
    <div id="root">
        <button @click="add">我被点击了 {{count}} 次</button>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    <script>
        //1、全局声明注册一个组件
        Vue.component("counter", {
            template: `<button @click="add">我被点击了 {{count}}  次</button>`,
            data() {
                return {
                    count: 1
                }
            },
            methods: {
                add() {
                    this.count++;
                }

            }

        })

        const app = new Vue({
            el: '#root',
            data: {
                count: 1


            },
            methods: {
                add() {
                    this.count++;
                }
            }

        });
    </script>
    <script>

    </script>
</body>

</html>
  1. 组件其实也是有一个vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
  2. 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。
  3. 全局组件定义完毕,任何vue实例都可以直接在绑定的html 容器 中通过 组件名称来使用组件了
  4. data必须是一个函数,作用就是,提供内部作用域,是其vue实例提供的data对象是独立存在的。以提供一个复用效果。

2.局部组件

    //局部声明一个组件
        const buttonCounter = {
            template: `<button @click="add">我被点击了 {{count}}  次</button>`,
            data() {
                return {
                    count: 1
                }
            },
            methods: {
                add() {
                    this.count++;
                }

            }


        }




        const app = new Vue({
            el: '#root',
            data: {
                count: 1


            },
            methods: {
                add() {
                    this.count++;
                }
            },
            components:{
                'button-counter':buttonCounter


            }

        });
   <div id="root">
        <button @click="add">我被点击了 {{count}} 次</button>
    
        <button-counter></button-counter>
    </div>

3.生命周期

  1. beforecreate: 数据模型未创建  模版未创建
  2. created :数据模型已创建 模板未渲染
  3. beforemount: 数据模型已创建 模板未渲染
  4. mouted :数据模型已创建 模板已渲染
  5. beforeupdate 数据模型已更新 模板未渲染
  6. updated 数据模型已更新 模板已渲染
  7. beforedistroy 销毁之前
  8. distroyed  已经销毁

4.使用Vue脚手架进行模块化开发

4.1 全局安装 webpack

npm install webpack -g

4.2 全局安装 vue 脚手架

npm install -g @vue/cli-init

4.3 初始化vue项目

vue init webpack vue-demo

4.4 启动vue项目

cd xxx
npm run dev

启动成功 

5. 路由 跳转

创建一个 hello.vue组件 在components文件夹下

<template>
  <div>
     <h1>你好 hello ,{{name}}</h1>
  </div>
</template>

<script>
export default {
    data(){
        return{
            name:"张三"
        }
    }

};
</script>

<style  >

</style>

在route文件下的index.js写上路由controller

然后再App.vue 根组件下随便写个  就可以跳转了

<router-link to="/hello"> Go to Hello </router-link>

6.Vue整合 ElementUI快速开发

Element - The world's most popular Vue UI framework

6.1安装 element UI

npm i element-ui -S

6.2 引入Element

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
<template>
  <div>
    <h1>你好 hello ,{{ name }}</h1>
    <el-radio v-model="radio" label="1">男生</el-radio>
    <el-radio v-model="radio" label="2">女生</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "张三",
      radio: "1",
    };
  },
};
</script>

<style  >
</style>

6.3 再举个例子

在element ui 导航栏上面跳转路由

<!--  -->
<template>
  <div>
       <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
  </div>
</template>

<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成(可以访问当前this实例)
  created() {},
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style  scoped>
</style>
举报

相关推荐

0 条评论