Vue学习笔记之Vue基础入门_this.detailslist.push-优快云博客

本文链接：https://blog.youkuaiyun.com/The_upside_of_down/article/details/103264977

本文是Vue学习笔记，涵盖了Vue实例创建、挂载点与模板的关系、数据与事件处理、属性绑定、计算属性和侦听器、指令如v-if/v-show/v-for，以及组件的基础知识，包括组件通信、组件与实例的关系，最后通过实例演示了表单提交和子组件通信的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建一个Vue实例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
  new Vue({
    el: "#root",
    data: {
      msg: "hello word"
    }
  })
</script>
</body>
</html>

上述代码中，将hello word通过el挂载到rootDOM节点上。在以往js代码中则是以以下方式实现的。

 var dom = document.getElementById("root");
  dom.innerHTML = "hello word";

二、挂载点、实例、模板之间的关系

"el"标签所对应的id就是挂载点，vue只会处理挂载点下的内容。

模板：在挂载点内部的内容，也可以以下方式去书写。

 new Vue({
    el: "#root",
    template: '<h1>hello {{msg}}</h1>>',
    data: {
      msg: "hello word"
    }
  })

Vue实例

三、Vue实例中的数据，事件与方法

数据存放在data里面

<body>
<!--{{number}} 插值表达式-->
<div id="root">{{msg}} {{number}}</div>
<!--也可用v-text,v-html来表示-->
<h1 v-text="number"></h1>
<script>
  new Vue({
    el: "#root",
    data: {
      // 在data里面可配置任意的数据项
      msg: "hello word",
      number: 123,
    }
  })

</script>
</body>

v-text、v-html的区别。

<div v-html="content"></div>
data: {
      // 在data里面可配置任意的数据项
      msg: "hello word",
      number: 123,
      content: "<h1>hello</h1>"
    }

v-html不会转义，而v-text会转义。

绑定事件：实现点击hello变成word

<body>
<!--{{number}} 插值表达式-->
<div id="root">{{msg}} {{number}}</div>
<!--也可用v-text,v-html来表示-->
<h1 v-text="number"></h1>
<!--v-on的语法糖为@-->
<div v-on:onclick="handleClick">{{content}}</div>
<script>
  new Vue({
    el: "#root",
    data: {
      // 在data里面可配置任意的数据项
      msg: "hello word",
      number: 123,
      content: "hello"
    },
    methods: {
      handleClick: function () {
        this.content = "word"
      }
    }
  })

</script>
</body>

Vue中想让页面发生变化，不需要操作DOM。而是直接改变。如上述直接改变content的值。Vue会监听你的数据并更新模板。

四、Vue中的属性绑定和双向数据绑定

属性绑定。当悬浮在helloword上时出现提示。

<body>
<div id="root">
  <!--v-bind可缩写为：-->
  <div v-bind:title="title">hello word</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      title: "this is hello word"
    },
    methods: {
    }
  })

</script>
</body>

双向数据绑定

  <input v-model="content" />
  <div>{{content}}</div>

五、Vue中的计算属性和侦听器

计算属性computed

<body>
<div id="root">
  <input v-model="firstName"/>
  <input v-model="lastName">
<!--我们希望以第二种方式输出，因此需要引用vue中的计算属性-->
  <div>{{firstName}}{{lastName}}</div>
  <div>{{fullName}}</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      firstName: '',
      lastName: '',
    },
    // 当firstName和lastName没有改变时，它不会重新计算，而是使用上次计算结果的缓存值。
    computed: {
      fullName: function () {
        return this.firstName+this.lastName;
      }
    },
    methods: {
    }
  })

</script>
</body>

侦听器。有这样一个需求，当姓名改变时count加一。

<script>
  new Vue({
    el: "#root",
    data: {
      firstName: '',
      lastName: '',
      count: 0,
    },
// 计算属性。fullName的值是根据其他属性计算而来的。
    computed: {
      fullName: function () {
        return this.firstName+this.lastName;
      }
    },
//侦听属性。检测某一个数据或者计算属性发生变化，一旦发生变化，就去实现侦听器中的逻辑。
    watch: {
      firstName: function () {
        this.count++;
      },
      lastName: function () {
        this.count++;
      },
// 其实可以直接侦听fullName。
      fullName: function () {
        this.count++
      }
    },
    methods: {
    }
  })

</script>

六、v-if、v-show、v-for指令

v-if是对dom树进行摧毁和新建。
v-show，则是改变css样式。

v-for：给数据做一个循环展示。

  <ul>
    <li v-for="(item,index) of list":key="index">{{item}}</li>
  </ul>

七、做一个demo ，实现提交一个表单，表单渲染到页面上。

<body>
<div id="root">
  <div>
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
  </div>
  <ul>
    <li v-for="(item,index) of list" :key="index"></li>
  </ul>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      inputValue: '',
      list: [],
    },
    methods: {
      handleSubmit: function () {
        this.list.push(this.inputValue);
        // 清空
        this.inputValue = ''
      }
    }
  })

</script>

八、组件

组件就是页面中的一部分。

拆分组件。

<body>
<div id="root">
  <div>
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
  </div>
  <ul>
    <todo-item></todo-item>
  </ul>
</div>
<script>
  //Vue.component 为全局组件
  // 方法1
  Vue.component('todo-item',{
    template: '<li>item</li>'
  })
  // 方法2
  var TodoItem = {
    template: '<li>item</li>'
  }
  new Vue({
    el: "#root",
    data: {
      inputValue: '',
      components:{
        // 需要进行一个组件声明 对应方法2
        'todo-item': TodoItem,
      },
      list: [],
    },
    methods: {
      handleSubmit: function () {
        this.list.push(this.inputValue);
        // 清空
        this.inputValue = ''
      }
    }
  })

</script>
</body>

通过props进行组件之间通信

<body>
<div id="root">
  <div>
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
  </div>
  <ul>
    <todo-item 
      v-for="(item,index) of list" 
      :key="index" 
      :content="item"
    >
    </todo-item>
  </ul>
</div>
<script>
  //Vue.component 为全局组件
  Vue.component('todo-item',{
    // props接收外部传入的参数content
    props: ['content'],
    template: '<li>{{content}}</li>'
  })
  new Vue({
    el: "#root",
    data: {
      inputValue: '',
      list: [],
    },
    methods: {
      handleSubmit: function () {
        this.list.push(this.inputValue);
        // 清空
        this.inputValue = ''
      }
    }
  })

</script>
</body>

九、组件与实例之间的关系。

每一个Vue组件也是一个Vue实例。
任何一个Vue项目是由千千万万个组件组成的。

十、子组件和父组件通信。

实现todolist删除功能。

<body>
<div id="root">
  <div>
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
  </div>
  <ul>
    <todo-item
      v-for="(item,index) of list"
      :key="index"
      :content="item"
    
      @delete = "handleDelete"
    >
    </todo-item>
  </ul>
</div>
<script>
  //Vue.component 为全局组件
  Vue.component('todo-item',{
    // props接收外部传入的参数content
    props: ['content'],
    template: '<li @click="handleClick">{{content}}</li>'
    methods: {
      handleClick: function () {
        // 自定义事件，向外触发
        this.$emit('delete',this.index);
      }
  })
  new Vue({
    el: "#root",
    data: {
      inputValue: '',
      list: [],
    },
    methods: {
      handleSubmit: function () {
        this.list.push(this.inputValue);
        // 清空
        this.inputValue = ''
      },
      handleDelete: function (index) {
        this.list.splice(index,1)
      }
    }
  })

</script>
</body>