Vue 入门二笔记

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

vue 概述

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex: 管理)或既有项目整合。官网: cn.vuejs.org/v2/guide/

前端的三要素

●HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容 ●CSS (表现) :层叠样式表(Cascading Style Sheets) ，设定网页的表现样式 ●JavaScript (行为) :是-种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行, 用于控制网页的行为

什么是vue

●Vue:一款渐进式JavaScript框架,所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的. 优点;

为什么要使用vue?

●轻量级，体积小是一个重要指标。Vue.js压缩后有只有20多kb (Angular压缩后56kb+, React压缩后44kb+) ●移动优先。更适合移动端，比如移动端的Touch事件 ●易上手,学习曲线平稳，文档齐全 ●吸取了Angular (模块化)和React (虚拟DOM)的长处，并拥有自己独特的功能，如:计算属性 ●开源，社区活跃度高

**什么时MVVM **

在这里插入图片描述

为什么要使用MVVM

Mvvm 模式和MVC 模式一样，主要目的是分离视图（view）和模型（model）,有几大好处低耦合：视图可以独立于Model 变化和修改，一个View Model 可以绑定到不同的view 上，当view 变化的时候Model可以不变，反之也行可复用：可以把一些视图放在一个View Model 里面，让很多view 重用这段视图逻辑独立开发：开发人员可以专注业务逻辑和数据开发，设计人员可以专注与页面设计可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel 来写

Mvvm模式的实现者

Model :模型层，这里表示JavaScript对象 View:视图层，在这里表示Dom (Html 操作得对象) 在MVVM 架构中，连接视图和数据中间件，Vue .js 就是MVVM 中 ViewModel 层的实现者，在MVVM 架构中，是不允许数据和视图直接通信的。他的核心就是实现了，数据的绑定和Dom的监听。

我的第一个vue 小demo

在这里插入图片描述新建一个html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<p style="color: red" id="demo1">
    {{message}}
</p>

<script>


  var vm=new Vue({
      el:"#demo1",
      data:{
          message:"你好啊，我的第一个VUE demo!1"
      }

  });

</script>
</body>
</html>

效果在这里插入图片描述

除了可以这样取值还可以用

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<p style="color: red" id="demo1" v-bind:title="message">
  你把鼠标划上去，就可以看到消息了！

</p>

<script>


  var vm=new Vue({
      el:"#demo1",
      data:{
          message:"你好啊，我的第一个VUE demo!1"
      }

  });

</script>
</body>
</html>

你看到的v-bind等被称为指令。指令带有前缀v-,以表示它们是Vue提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是:“将这个元素节点的title特性和Vue实例的message属性保持- -致”。在这里插入图片描述其他简单的指令 vue 也有遍历的 第一个点击事件

<!DOCTYPE html>
<html lang="en"  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<button v-on:click="hello" id="demo1">
    点击我
</button>

<script>


  var vm =new Vue({
      el:"#demo1",
      data: {
          message: "娇娇的第一点击事件！"
      },
      methods:{
          hello: function (event) {
        alert(this.message)
          }
      }

  });

</script>
</body>
</html>

Vue 表单双绑，组件

什么是双向数据绑定? Vue.js 是一个MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步。这种数据双向绑定一定是对于UI 控件来说的，不是ui 控件不会涉及到的数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex那么数据流也是单项的，就会和双向数据绑定发生冲突。

为啥要实现数据的双向绑定

在vue.js 中，如果使用的vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI 控件来说的，我们处理表单，Vue.js 的双向数据绑定用起来特别舒服了，即两者并不互斥，在全局性数据流使用单项，方便跟踪，局部性数据流使用双向绑定。简单方便。

表单如何使用双向绑定

你可以用v-model指令在表单. 及元素上创建双向数据绑定

input 的数据双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<div style="color: #45bb51" id="demo1">
    <input type="text" v-model="message">
    你输入的是：
    <p>
{{message}}</p>
</div>

<script>


  var vm=new Vue({
      el:"#demo1",
      data:{
          message:"",
      }

  });

</script>
</body>
</html>

效果

会跟你输入的一起变化。在这里插入图片描述

单选款的

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<div style="color: #45bb51" id="demo1">
    <input type="radio" v-model="message" value="男" name="sex"> 男
    <input type="radio" v-model="message" value="女" name="sex"> 女
    你输入的是：
    <p>
{{message}}</p>
</div>

<script>


  var vm=new Vue({
      el:"#demo1",
      data:{
          message:"",
      }

  });

</script>
</body>
</html>

在这里插入图片描述 多选框的

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<div style="color: #45bb51" id="demo1">
   <select  v-model="message">

       <option disabled value="">
           请选择
       </option>
       <option>苹果</option>
       <option>香蕉</option>
       <option>草莓</option>
   </select>
    你选择的是：
    <p>
{{message}}</p>
</div>

<script>


  var vm=new Vue({
      el:"#demo1",
      data:{
          message:"",
      }

  });

</script>
</body>
</html>

效果在这里插入图片描述

什么是组件

组件是可复用的VUE 实例，就是一组可以重复使用的模板，跟JSTL 的自定义标签，thymeleaf 的 th:fragment 等框架有着异曲同工之妙。

自定义自己的第一个标签

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<div style="color: #45bb51" id="demo1">
<jiaojiao></jiaojiao>
</div>

<script>
Vue.component('jiaojiao',{
    template: '<a href="#">jiaojaio</a>'

})

  var vm=new Vue({
      el:"#demo1",


  });

</script>
</body>
</html>

效果在这里插入图片描述如何实现数据交互效果

使用props 属性传递参数

单纯的定义一个便签是没有用的，我们需要传递数据，就需要用的是props 属性

其他的说明

v-for="item in items" 遍历Vue 实例中定义的名为items 的数组，并创建同等数量的组件 v-bind:feng="item" 将item 项绑定到组件中props 定义的名为item 属性上；= 号左边的item 为props 定义的属性名，右边的为item in items 中遍历的item 项的值。

Vue 的生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建，初始化数据，编译模板，挂载Dom ,渲染--更新--渲染，卸载等一系列过程，我们称为这是Vue 的生命周期，通俗说就是Vue 实例创建到销毁的过程，就是生命周期在Vue 的整个生命周期，它提供了一系列的事件，可以让我们在事件时注册js 方法，可以让我们用自己注册的js 方法控制整个大局，在这些事件响应方法中this 直接指向的Vue 的实例

遍历json 数据实现

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入JS文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


</head>
<body>
<div style="color: red" id="demo1">
<p>{{info.name}}</p>
    <p>{{info.address.street}}</p>
</div>

<script>


  var vm=new Vue({
      el:"#demo1",
      data(){
      return{
          //请求的返回参数 和json 字符串一样
          info:{
              name :null,
              address: {
                  street: null
              }
          }
      }
      },
mounted(){
          //钩子函数 ，链式编程，ES6 新特性
    axios.get('../data.json').then(response=>(this.info=response.data))
}
  });

</script>
</body>
</html>

效果在这里插入图片描述

计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先他是个属性其次这个属性有计算的能力（计算是动词），这里的计算就是个函数，简单来说，它就是一个能够将计算结果缓存起来的属性（将行为转换成了静态的属性），可以理解为缓存。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<div id="demo1" style="color: #45bb51">
<p>one {{currentTime1()}}</p>
    <p>two {{currentTime2}}</p>
</div>

<script>


  var vm=new Vue({
      el:"#demo1",
      data:{
          message:"你好啊，我的第一个VUE demo!1"
      },
        methods: {
        currentTime1: function () {
        return Date.now();   //返回的是一个时间
        }
        },
      computed: {
          //计算属性 ： methods computed 方法名不可以重复，重复后就只能调用methods
          currentTime2: function () {
              return Date.now();   //返回的是一个时间
          }

      }
  });

</script>
</body>
</html>

在这里插入图片描述 计算属性总结 计算属性的主要特征就是为了将不经常变化的计算结果进行缓存，节约我们系统的开销。 内容分发 在vue.js 中我们使用元素作为承载分发内容的出口。可以应用在组合组件场景中

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<div id="dmeo1" style="color: #45bb51">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<script>
// slot : 插槽
Vue.component("todo",{
    template: '<div>\
               <slot name="todo-title"></slot>\
               <ul>\
                 <slot name="todo-items"></slot>\
                 </ul>\
                 </div>\
    '
});
//标题
Vue.component("todo-title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
});
//遍历里的
Vue.component("todo-items",{
    props: ['item'],
    template: '<li>{{item}}</li>'
});

  var vm=new Vue({
      el:"#dmeo1",
      data:{
          title: "娇娇的demo",
          todoItems: ['哈哈哈哈','嘿嘿嘿','嘻嘻嘻嘻嘻']
      }

  });

</script>
</body>
</html>

自定义

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<div id="dmeo1" style="color: #45bb51">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
</todo>
</div>
<script>
// slot : 插槽
Vue.component("todo",{
    template: '<div>\
               <slot name="todo-title"></slot>\
               <ul>\
                 <slot name="todo-items"></slot>\
                 </ul>\
                 </div>\
    '
});
//标题
Vue.component("todo-title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
});
//遍历里的
Vue.component("todo-items",{
    props: ['item','index'],
    template: '<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
    methods: {
        remove: function (index) {
            this.$emit('remove',index)
            alert(11)
        }
    }

});

  var vm=new Vue({
      el:"#dmeo1",
      data:{
          title: "娇娇的demo",
          todoItems: ['哈哈哈哈','嘿嘿嘿','嘻嘻嘻嘻嘻']
      },
      methods: {
          removeItems: function (index) {
            this.todoItems.splice(index,1)//一次删除一个元素
          }
      }

  });

</script>
</body>
</html>

入门小结

核心：数据驱动，组件化优点：借鉴了AngulaJs 的模块化开发和React 的虚拟Dom ,虚拟Dom 就是把Dom操作放到内存中执行常用的属性： v-if v-else-if v-else v-for v-on 绑定事件，简写 v-model 数据双向绑定 v-bind 给组件绑定参数，简写组件化组合组件slot 插槽组件内部绑定事件需要使用到 this.$emit('事件名'，参数) 计算属性的特点，缓存计算数据遵循Soc 关注分离原则，Vue 是纯粹的视图框架，并不包含，比如Ajax 之类的通信功能问题，我们需要使用Axios 框架做一步通信

Vue 入门 二 笔记

Vue 入门二笔记