我的个人博客

记录我的学习心路历程

0%

发表于 分类于 
//scope:让样式在局部生效，防止冲突
<template>
  <div class="stu">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "卢航我儿",
      sex: "男",
    };
  },
};
</script>

<style scope>
.stu {
  background-color: orange;
}
</style>

<style lang="css">//lang用于指定style所用的语言css/less
  
</style>

发表于 分类于

mixin:

​ 可以把多个组件共用的配置提取成一个混入对象

使用方式：

​ 全局混入：Vue.mixin(xxx)

​ 局部混入：mixins:[“xxx”]

//mixin.js
export const hunhe = {
    methods: {
        showName() {
            alert(this.name);
        },
    },
}
export const hunhe2 = {
    data() {
        return {
            x: 200,
            y: 300
        }
    },
}
<template>
  <div>
    <button @click="showName">点我展示名称</button>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
  </div>
</template>

<script>
import { hunhe, hunhe2 } from "../mixin";
export default {
  name: "Student",
  data() {
    return {
      name: "卢航我儿",
      sex: "男",
    };
  },
  mixins: [hunhe, hunhe2],
};
</script>

发表于 分类于 
<template>
  <div>
    <Student name="李四" sex="女" :age="19" />
    <!-- age前面加冒号，表示age是动态单向绑定 -->
  </div>
</template>

<script>
import Student from "./components/Student.vue";

export default {
  name: "App",
  components: { Student },
};
</script>
<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ age + 1 }}</h2>
    <button @click="addAge">点我年龄加一</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "我是一个前端学生",
      myAge: this.age,
    };
  },
  methods: {
    addAge() {
      this.age++;
    },
  },

  //props: ["name", "sex", "age"],//简单接收

  //接收的同时指定数据类型
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String
  // }

  //高级声明
  props: {
    name: {
      type: String, //限定类型为字符串类型
      required: true, //name必须要传
    },
    age: {
      type: Number,
      default: 99, //默认值
    },
    sex: {
      type: String,
      required: true,
    },
  },
};
</script>

发表于 分类于 
//ref属性
//1、被用来给子组件或html标签注册引用信息
//2、用在html标签上是获取真实DOM元素，用在子组件上是组件的实例对象(vc)

<template>
  <div>
    <h2 ref="title">标题</h2>
    <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
import School from "./components/School.vue";

export default {
  name: "App",
  components: { School },
  methods: {
    showDOM() {
      console.log(this.$refs.title); //真实的DOM元素
      console.log(this.$refs.btn); //真实的DOM元素
      console.log(this.$refs.sch); //获取组件的实例对象VueComponent
    },
  },
};
</script>

<style>
</style>

发表于 更新于 分类于
6.24
investigated 研究的 sensibe 理智的
enhancement 增强 execution 执行
composed 组成;平静的 triggered 触发的
inevitably 不可避免地 omission 省略
ongoing 持续存在的 decomposed 已腐烂的
6.29
dispatch 派遣 mutation 转变
render 使成为

发表于 分类于 
<div id="root">

        <!-- 数组遍历 -->
        <h2>人员列表</h2>
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 面试题：React和Vue中key的原理
        // 1、key是DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM
        // 2、随后Vue会根据新虚拟DOM和旧的虚拟DOM进行差异比较

        //比较规则如下
        //旧虚拟DOM中找到与新虚拟DOM相同的key:
        //若虚拟DOM内容没变，直接使用之前的真实DOM
        //若虚拟DOM内容改变，生成新的真实DOM

        //旧虚拟DOM中找到与新虚拟DOM相同的key:
        //创建新的真实DOM，然后渲染到页面

        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                persons: [
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '李四', age: 19 },
                    { id: '003', name: '王五', age: 20 },
                ],
            },
            methods: {
                add() {
                    const p = { id: '004', name: '老刘', age: 21 };
                    this.persons.unshift(p);

                }
            },
            //data用于存放数据，数据供el所指定容器服务
        })
    </script>

发表于 分类于 
<div id="root">

        <!-- 数组遍历 -->
        <h2>人员列表</h2>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <!-- 对象遍历 -->
        <h2>汽车信息</h2>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(k,value) in car" :key="value">
                {{value}}-{{k}}
            </li>
        </ul>

        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(char,index) in str" :key="index">
                {{index}}-{{char}}
            </li>
        </ul>

        <!-- 遍历指定次数 -->
        <h2>遍历次数</h2>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(number,index) in 5" ::key="index">
                {{index}}-{{number}}
            </li>
        </ul>

    </div>
    <script type="text/javascript">

        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                persons: [
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '李四', age: 19 },
                    { id: '003', name: '王五', age: 20 },
                ],
                car: {
                    name: '宝马x5',
                    money: '65万',
                    color: 'black'
                },
                str: 'hello'
            }
        })
    </script>

发表于 分类于 
<div id="root">
        <!-- 会将元素转换weidisplay:none进行隐藏，适用于切换频率较高的场景 -->
        <h1 v-show="false">Hello,{{name}}</h1>
        <!-- 会将元素直接全部干掉,适用于切换频率较低的场景 -->
        <h1 v-if="false">Hello,{{name}}</h1>
        <h4>n的值为{{n}}</h4>
        <button @click="n++">点击我n+1</button>

        <!-- v-else-if和v-else的用法 -->
        <!-- v-if可以和v-else,v-else-if使用，中间不允许打断 -->
        <div v-if="n==1">Angular</div>
        <div v-else-if="n==2">React</div>
        <div v-else-if="n==3">Vue</div>
        <div v-else>哈哈</div>

        <!-- template的好处是不会破坏页面的结构，而且只能配合v-if使用 -->
        <template v-if="n==1">
            <h2>你好</h2>
            <h2>我的</h2>
            <h2>某某</h2>
        </template>
    </div>

    <script type="text/javascript">
        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                name: '西南大学',
                n: 0
            }
            //data用于存放数据，数据供el所指定容器服务
        })
    </script>

发表于 分类于

计算属性可以实现的功能监视属性都可以实现，但监视属性能实现的功能计算属性不一定能实现，如异步(定时器的回调函数)

被Vue所管理的函数最好都写成普通函数，不被Vue所管理的函数(如定时器的回调函数，ajax的回调函数)最好都写成箭头函数

发表于 分类于 
<div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">点我切换天气</button>
</div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            //计算属性
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            //方法
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot;
                }
            },
            //监视
            watch: {
                isHot: {
                    //Vue中的watch默认不可以监视多级结构中的属性
                    //开启deep: true深度监视后就可以监测多级结构中某个属性发生变化
                    deep: true,
  
                    //初始化时让handler调用一下
                    immediate: true,
                    
                    //当isHot发生改变时handler函数被调用，并返回新值和旧值
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue);
                    }
                }
            },
        })
        //另一种写法
        // vm.$watch('isHot', {
        //     immediate: true,
        //     //当isHot发生改变时handler函数被调用
        //     handler(newValue, oldValue) {
        //         console.log();
        //     }
        // })
    </script>
//当监视属性中确定不使用deep和immediate时，就可以使用简写
                isHot(newValue, oldValue) {
                    console.log("isHot被修改了", newValue, oldValue);
                }