Vue2.5入门-2

最新推荐文章于 2023-09-02 20:44:10 发布

dhzp5170

最新推荐文章于 2023-09-02 20:44:10 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/TomAndJerry/p/10618230.html

版权

todolist功能开发

代码

<!DOCTYPE html>
<html>
<head>
  <title>vue 入门</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="root">
      <div>
          <input type="text" v-model="value"/>
          <button @click="add">提交</button>
      </div>
      <div>
          <ul>
              <li v-for="(item,index) of list" v-bind:key="index">{{item}}</li>
          </ul>
      </div>
  </div>
  <script>
      new Vue({
          el: "#root" ,//和哪一个dom节点绑定
          data: {
              value: null,
              list: []
          },
          methods:{
              add: function(){
                  console.log(123);
                  this.list.unshift(this.value);
                  this.value = '';
              }
          }
      })
  </script>
</body>
</html>

组件拆分

代码

<!DOCTYPE html>
<html>
<head>
  <title>vue 入门</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="root">
      <div>
          <input type="text" v-model="value"/>
          <button @click="add">提交</button>
      </div>
      <div>
          <ul>
              <todo-item v-for="(item,index) of list" :key="index" :content="item" @dele="dele"></todo-item>
          </ul>
      </div>
  </div>
  <script>
      //定义一个全局组件
      // Vue.component('todo-item', {
      //  template: '<li>{{content}}</li>'
      // })

      //定义一个局部组件
      var TodoItem = {
          //如果父组件向子组件传值，那么子组件需要定义参数
          props: ['content'],
          template: '<li @click="dele">{{content}}</li>',
            methods: {
              dele(){
                  //console.log(this.index);
                  this.$emit('dele',this.index);
              }
          }
      }
      new Vue({
          el: "#root" ,//和哪一个dom节点绑定
          //如果是全局组件，那么需要定义props接收参数
          props: ['content'],
          //如果是局部组件，需要做一个注册
          components: {
              'todo-item': TodoItem
          },
          data: {
              value: null,
              list: []
          },
          methods:{
              add: function(){
                  console.log(123);
                  this.list.unshift(this.value);
                  this.value = '';
              },
                dele(index){
                  this.list.splice(index,1)
              }
          }
      })
  </script>
</body>
</html>