Vue起步(一)

最新推荐文章于 2022-01-10 18:53:28 发布

一个爱浪费时间的人

最新推荐文章于 2022-01-10 18:53:28 发布

阅读量261

点赞数 1

分类专栏： vue 文章标签： vue入门

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_33248299/article/details/101389026

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.vue介绍

当下最火的三大前端框架当属vue、react以及angular了
为什么要学vue，因为vue有很多优势
vue比react、angular更容易上手，vue写起来更加流畅、方便，vue的优化做的要比react好一些，vue的文档更加好
vue是一套用于构建用户界面的渐进式框架

二.vue的hello版本

1.hello vue

<body>
      <div id="a"></div>
      <div id="app">{{content}}</div>
      <div>{{content}}</div>

      <script>
          var dom = document.getElementById('a');
          dom.innerHTML = "hello vue"
          
          var app = new Vue({
              el:"#app",
              data:{
                  content:"hello vue"
              }
          })
      </script>
</body>

首先创建了一个vue实例
el表示实例管理的区域，接管id为app标签里的所有内容
data为数据源
{{}}插值表达式可以调用data里面的数据

2.加上一个定时器

面向dom编程

      <div id="a"></div>


      <script>
          var dom = document.getElementById('a');
          dom.innerHTML = "hello vue"

          setTimeout(function () {
              dom.innerHTML = "hello world"
          },2000);

面向数据编程


      <div id="app">{{content}}</div>

      <script>
          var app = new Vue({
              el:"#app",
              data:{
                  content:"hello vue"
              }
          })

          setTimeout(function () {
              app.$data.content = "hello world"
          },2000);
      </script>

总结:vue要我们只需要关注数据，数据改变，页面就会跟着发生变化

三.使用vue.js实现简单todoList

v-model:数据双向绑定(input框值发生变化，vue实例中的inputValue也变化，相反也成立)
v-on:绑定事件(此处绑定点击事件)
v-for:遍历

<body>
      <div id="app">
           <input type="text" v-model="inputValue">
          <button v-on:click="btnClick">提交</button>
           <ul>
               <li v-for="item in list">{{item}}</li>
           </ul>
      </div>
      <script>
          var app = new Vue({
              el:"#app",
              data:{
                  inputValue:'',
                  list:[]
              },
              methods:{
                  btnClick:function () {
                      this.list.push(this.inputValue)
                      this.inputValue=''
                  }
              }
          })
      </script>
</body>

总结:vue没有操作dom元素一直都在操作数据

四.MVVM模式

1.传统模式-MVP模式

在这里插入图片描述

Model-数据层 Presenter-业务逻辑的控制层 View-视图层(页面上的视图展示)
Jquery实现一个todoList

<body>
      <div id="app">
          <input type="text" id="input">
          <button id="btn">添加</button>
          <ul id="list">
          </ul>
      </div>

       <script>
           function Page() {

           }

           $.extend(Page.prototype,{
               init:function () {
                    this.bindEvents()
               },
               bindEvents:function () {
                   var btn = $('#btn');
                   btn.on('click',$.proxy(this.handleBtnClick,this))
               },
               handleBtnClick:function () {
                   var inputElem = $('#input');
                   var inputValue = inputElem.val();
                   var ulElem = $("#list");
                   ulElem.append('<li>' + inputValue + '</li>');
                   inputElem.val('');
               }

           })
           var page = new Page();
           page.init();
       </script>
</body>

M比较弱没有通过ajax获取远程数据
上面的dom div就是视图
控制器点击提交控制器会去执行，控制器可以调模型层 ajax请求通过dom操作改变视图，最核心的是presenter 控制器层，大量代码写在presenter层中，大量代码都是做dom操作

2.MVVM模式

在这里插入图片描述

虽然也有视图层和模型层，但没有presenter这层了，ViewModel不需要编写，vue自带的，所以只需要关注v和m
MVVM层中的M层，上面写的标签就是MVVM中的V层，数据改变页面改变这个操作时VM层做的
vue层就是VM层
M层最重要
Jquery面向dom编码，vue面向数据编码，用vue代码量大大减少，至少可以减少百分之30，就可以见到vue的强大

五.前端组件化

页面切分成一个一个部分,每个部分都可称为一个组件
向下面这些一个一个部分，都可以称为组件

六.使用组件化思想修改todoList

1.全局组件

把li标签变成一个组件
v-bind:向子组件传递绑定值
props:从父组件接受内容

 <div id="app">
           <input type="text" v-model="inputValue">
          <button v-on:click="btnClick">提交</button>
           <ul>
                <todo-item v-bind:content="item" v-for="item in list">${{item}}</todo-item>
           </ul>
      </div>
      <script>
          Vue.component("TodoItem",{
              props:['content'],
              template:'<li>{{content}}</li>'
          })
          var app = new Vue({
              el:"#app",
              data:{
                  inputValue:'',
                  list:[]
              },
              methods:{
                  btnClick:function () {
                      this.list.push(this.inputValue)
                      this.inputValue=''
                  }
              }
          })
      </script>

2.局部组件

局部组件就像是创建一个对象
然后把这个对象注册到vue实例中

 <div id="app">
           <input type="text" v-model="inputValue">
          <button v-on:click="btnClick">提交</button>
           <ul>
                <todo-item v-bind:content="item" v-for="item in list">${{item}}</todo-item>
           </ul>
      </div>
      <script>
          var TodoItem = {
              props:['content'],
              template:'<li>{{content}}</li>'
          }
          var app = new Vue({
              el:"#app",
              components:{
                TodoItem:TodoItem
              },
              data:{
                  inputValue:'',
                  list:[]
              },
              methods:{
                  btnClick:function () {
                      this.list.push(this.inputValue)
                      this.inputValue=''
                  }
              }
          })
      </script>

七.简单的组件间传值

父组件向子组件传递数据v-bind
那么子组件怎么向父组件传递数据呢？(实现点击每一项能够删除自己-下标是关键)
- 向外触发事件，比如delete
- 父组件创建子组件同时监听delete事件
v-on:click简写 @click
v-bind:index简写:index

<body>
      <div id="app">
           <input type="text" v-model="inputValue">
          <button v-on:click="btnClick">提交</button>
           <ul>
                <todo-item v-bind:content="item" :index="index" v-for="(item,index) in list" @delete="handleItemDelete">${{item}}</todo-item>
           </ul>
      </div>
      <script>
          var TodoItem = {
              props:['content','index'],
              template:'<li @click="handleItemClick">{{content}}</li>',
              methods:{
                  handleItemClick:function () {
                      this.$emit("delete",this.index)
                  }
              }
          }
          var app = new Vue({
              el:"#app",
              components:{
                TodoItem:TodoItem
              },
              data:{
                  inputValue:'',
                  list:[]
              },
              methods:{
                  btnClick:function () {
                      this.list.push(this.inputValue)
                      this.inputValue=''
                  },
                  handleItemDelete:function (index) {
                      this.list.splice(index,1)
                  }
              }
          })
      </script>
</body>