vue学习记录:mvc与MVVM区别、vue的安装、v-cloak、v-text、v-html用法、v-bind及v-on用法

本文链接：https://blog.csdn.net/pig_pig32/article/details/108462485

什么是Vue.js

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

后端的 MVC 与前端中的 MVVM 之间的区别

MVC : 是后端的分层开发概念；
MVVM: 是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel

Vue.js三种安装方式

方式一: CDN引入（直接在所需项目页面引入）

<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

方式二: 下载和引入

下载地址:https://cn.vuejs.org/v2/guide/installation.html

下载好之后把vue.js引入到项目中。

方式三: NPM引入

<!-- 下载最新稳定版 -->
$ npm install vue

Vue.js初体验:vue中的MVVM模式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- new 的Vue实例会控制的这个元素区域，就是我们的 View  -->
  <div id="app">
    <p>{{ msg }}</p><!-- {{ }} 这个叫插值表达式 -->
  </div>
  
  <script>
    //  创建一个Vue的实例，我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 Model，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: 'hello Vue' // 通过 Vue 提供的指令，标签可以直接获取msg的值
      }
    })
  </script>
</body>

</html>

实现效果:

在这里插入图片描述

Vue.js中v-cloak、v-text、v-html用法

v-cloak: 能够解决插值表达式闪烁的问题,但要在style里给v-cloak添加display: none; 可以在标签内添加数据
v-text: 显示绑定的值，但不能在标签中添加数据
v-html: 解析html标签

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    [v-cloak] {
       display: none; 
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
    <p v-cloak>v-cloak添加值可以显示出来 {{ msg }} 我显示出来啦</p>
    <h4 v-text="msg">我v-text添加值不会显示出来只能通过绑定v-text="msg"获取值</h4>
    <!-- 默认 v-text 是没有闪烁问题的 -->
    <!-- v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空 -->

    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
	<!-- v-html可以解析html标签 -->
    <div v-html="msg2">132448</div>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>卧槽，我被看到啦！</h1>'}
    })
  </script>
</body>

</html>

实现效果:

在这里插入图片描述

vue.js中的v-bind和v-on的用法

v-bind: 是 Vue中，提供的用于给标签绑定"属性"的指令
v-on: 是 Vue中，提供的用于给标签绑定"事件"的指令

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./lib/vue-2.4.0.js"></script>
 <style type="text/css">
 	#app div{
		float: left;
		margin: 20px 50px;
	}
	#app input{
		width: 200px;
		height: 40px;
	}
 </style>
</head>

<body>
  <div id="app">
    <!-- Vue 中提供了 v-on: 事件绑定机制 -->
    <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> -->
    <div>
		<!-- 普通的按钮 -->
    	<input type="button" value="啥也没有" />
    </div>
	<div>
		 <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->
		 <input type="button" v-bind:value="value1" />
          <!-- v-bind: 指令可以被简写为 :要绑定的属性 -->
		 <input type="button" :value="value2" />
	</div>
   <div>
	   <!-- Vue 中提供了 v-on: 事件绑定机制 -->
   	 <input type="button" value="v-on事件绑定" v-on:click="show">
	 <!-- v-on: 指令可以被简写为 @要绑定的事件 -->
	 <input type="button" value="v-on事件缩写@" @click="show">
   </div>
   
  </div>
  <script>
    var vm = new Vue({
		 el: '#app',
		 data:{
         value1: '我是被bind添加的值',
		 value2:'我是v-bind的缩写 :'
      },
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('我是v-on绑定的事件')
        }
      }
    })
  </script>
</body>

</html>