vue

1、开发环境准备

安装node https://nodejs.org/en/

安装Vue工具

Vue CLi 安装命令：npm install -g @vue/cli

安装之后查看

vue --version

vue 官网：https://cn.vuejs.org/

2、创建项目

vue create 项目名

注意：项目名字不能大写

选择

根据自己的需要选择

默认即可

输入n即可

根据提示运行项目

启动成功

3、模板语法

<template>
  <div>
    <h3>学习模板语法</h3>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message:"测试"
    }
  }
}
</script>

1、v-html  解析html标签
2、v-bind  响应式地绑定
3、v-if、v-else  根据值的真假移除或添加元素
4、v-show   根据值的真假显示或隐藏元素

4、列表渲染

v-for

<template>
  <div>
    <h3>列表渲染</h3>
    <ul>
      <li v-for="(item,index) in names">{{ item.name }}------>{{ index }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      names: [
        {id: 1, name: "小明"},
        {id: 2, name: "老大"},
        {id: 3, name: "老二"}
      ]
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

注意

<li v-for="(item,index) in names" :key="item.id">{{ item.name }}------>{{ index }}</li>
:key="item.id" 在数组元素改变时，会只重新渲染改变的数据，其它没变的不会重新渲染
减少性能的消耗

5、事件处理

@click或v-on:click

<template>
  <div>
    <h3>事件处理</h3>
    <button v-on:click="dianJi">点击</button>
    <h3>{{num}}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      num: 0
    }
  },
  methods: {
    dianJi() {
      this.num += 1;
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

6、双向数据绑定

v-model

<template>
  <div>
    <h3>双向数据绑定</h3>
    <input type="text" v-model="username">
    <h3>{{username}}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      username: ""
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

1、v-model.lazy  加上后输入数据回车或失去焦点才进行同步
2、v-model.trim 去除输入的空格

7、单文件组件

1、组件内容

<template>
  <div>
    <h3>单文件组件</h3>
  </div>
</template>

<script>
export default { //导出
  name: "MyComponents",
  data() {
    return {}
  }
}
</script>
//scoped 添加这属性 组件内设置的样式只会作用在这个组件
<style scoped>
h3 {
  color: red;
}
</style>

2、加载组件

1、引入组件  import myComponents from "@/components/MyComponents";
2、挂载组件components: {myComponents}
3、显示组件<my-components/>

8、组件交互

props 父组件向子组件传值

 1、在父组件定义好值
  data() {
    return {
      title: "我是一个标题",
      age: 100
    }
  }
2、在显示组件上引用
<my-components :oneHiz="title" :age="age"/> 
3、最后在子组件上使用
export default {
  name: "MyComponents",
  props:{
    oneHiz:{ //需要定义类型
      type:String,
      default:""
    },
    age:{
      type:Number,
      default:0
    }
  }
}

9、自定义事件组件交互

现在子组件定义传递的值和事件

<template>
  <div>
    <h3>自定义组件传递数据</h3>
    <button @click="sendFather">发送</button>
  </div>
</template>

<script>
export default {
  name: "MyComponents",
  data() {
    return {
      msg: "我是MyComponents数据"
    }
  },
  methods: {
    sendFather() {
      //参数1: 字符串
      //参数2: 传递的数据
      this.$emit("onEvent", this.msg)
    }
  }
}
</script>

<style scoped>
h3 {
  color: red;
}
</style>

父组件接受值

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <my-components @onEvent="getData"/>
  </div>
</template>

<script>

import myComponents from "@/components/MyComponents";

export default {
  name: 'App',
  components: {
    myComponents
  },
  methods: {
    getData(data) {
      console.log(data)
    }
  }
}
</script>

<style>
div {
  width: 400px;
  height: 400px;
  text-align: center;
  margin: 0 auto;
}
</style>

作用：子组件向父组件传递值

时间:2022-10-28 晚上