vuejs简单入门

最新推荐文章于 2024-05-09 20:15:14 发布

Zhang_1024A

最新推荐文章于 2024-05-09 20:15:14 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/Zhang_1024A/article/details/114951355

版权

Vue简单入门

VueJS介绍
VueJS常用系统指令

VueJS介绍

1.Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
2.Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
3.前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
官网：Vue官网
tips：VueJS是前端渐进式框架，让Html和JavaScript无缝的整合，实现了视图和模型的双向数据绑定（MVVM）。

MVVM模式（1）什么是Model？

（2）什么是View？
（3）什么是ViewModel？
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
MVVM是前端视图层的分层开发思想，主要是把每个页面，分成了M , V 和 VM 其中，VM是 MVVM 思想核心；
因为VM 是 M 和 V 之间的调度者
在这里插入图片描述
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
在这里插入图片描述
tips：【小结】：MVVM模式是视图和模型的双向数据绑定，通过ViewModel实现，当View发生变化，Model变化；当Model变化，View也相应的变化。

入门案例

（1）创建工程
（2）导入js
（3）编写入门程序（Vue实例）
（4）插值表达式{{message}}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入门</title>
       <!-- 1. 导入Vue的包 -->
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
  <body>
  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
         msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>
</html>

插值表达式 {{message}}

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        {{message}}<br>
        {{message1}}<br>
        {{message1+10+100}}<br>
        {{message1>5?"大于5的数":"小于5的数"}}
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el:"#app", // 表示vue的程序入口，在id=app的div中可以使用vue声明的指令
        data:{  // 声明模型，模型的数据可以是基本类型，json数据
            message:"你好,vuejs",
            message1:10
        },
        methods:{ // 声明函数，绑定页面的事件

        }
    })
    // 改变模型的数据，测试视图是否发生变化
    vue.message = "你好，尚硅谷"
</script>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

tips: （1）VueJS介绍（前端渐进式框架）
（2）MVVM模式（视图、模型的双向绑定）
（3）VueJS的快速入门
是不是很简单呢^_？只需要导入1个js，定义1个Vue实例，写3个属性（el，data，methods），写1个插值表达式输出结果，即可实现效果
其中data：用来定义模型（Model）
其中 {{}}：用来显示数据（View）
其中ViewModel用来将模型的数据显示到视图上

VueJS常用系统指令

1：v-on：事件
2：v-text与v-html：文本
3：v-bind：属性
4：v-model：绑定表单（用于回显）
5：v-for：循环数据
6：v-if与v-show：判断

v-on

v-on:（等同于@）
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

v-on:click（等同于@click）

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-on:click单击事件</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         {{message}}  
         <!--<button v-on:click="fun('good')">改变</button>-->
         <button @click="fun('good')">改变</button>
      </div>
   </body>
   <script>
      //view model
      var vm = new Vue({
         el:"#app",
         data:{
            message:"hello world"  //model表示模型，封装数据
         },
         methods:{
            fun:function(msg){
               // this代表的是vue对象，或者使用vm
               this.message=msg;
            }
         }
      });
   </script>
</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>
  <!-- 1. 导入Vue包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 2. 创建一个要控制的区域 -->
  <div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="低调" @click="stop">
    <h4>{{ msg }}</h4>
  </div>

  <script>
    // 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '硅谷，别浪~~！',
        intervalId: null // 在data上定义 定时器Id
      },
      methods: {
        lang() {
          // console.log(this.msg)
          // 获取到头的第一个字符
          if (this.intervalId != null) return;
          //setInterval(function(){
          this.intervalId = setInterval(() => {
            var start = this.msg.substring(0, 1)
            console.log(start);            // 获取到 后面的所有字符
            var end = this.msg.substring(1)
            console.log(end);
            // 重新拼接得到新的字符串，并赋值给 this.msg
            this.msg = end + start
              console.log(this.message);
          }, 400);

          // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
        },
        stop() { // 停止定时器
          clearInterval(this.intervalId)
          // 每当清除了定时器之后，需要重新把 intervalId 置为 null
          this.intervalId = null;
        }
      }
    })


    // 分析：
    // 1. 给 【浪起来】 按钮，绑定一个点击事件   v-on   @
    // 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；
    // 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
  </script>
</body>

</html>

v-on:keydown

在这里插入图片描述
需求：

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-on:keydown</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <input type="text" v-on:keydown="fun($event)">    
         <!-- <input type="text" @keydown="fun($event)" /> -->
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el: "#app",
         data: {
           message: 10 //model
         },
         methods: {
            fun: function(e) {
               //1.捕获keyCode 判断它是否是0-9  需要使用event对象
               var keyCode = e.keyCode;
                // 只能输入数字
               if(!(keyCode >= 48 && keyCode <= 57)) {
                  //2.阻止默认行为执行
                  e.preventDefault();
               }
            }
         }
      });
   </script>
</html>

v-text与v-html

使用{{}}可以输出文本的值。
v-text：输出文本内容，不会解析html元素
v-html：输出文本内容，会解析html元素

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-text与v-html</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <div v-text="message"></div>
         <div v-html="message"></div>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         data:{
            message:"<h1>hello world</h1>"//model
         }
      });
   </script>
</html>

v-model

用于读取视图中的数据。
【需求】：使用vue赋值json数据，并显示到页面的输入框中（表单回显）。
点击提交按钮：
测试：改变输入框的值，同时验证模型的数据发生改变。
测试：改变json数据，验证同时输入框的内容也发生改变。
这就是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>
	<script type="text/javascript" src="js/vue.min.js"></script>
    </head>

    <body>
	<div id="app">			
	<p>
		<label>用户名：</label>{{username}}<br>
		<input type="text" v-model="username" />
		<input type="button" value="改变值" @click="fnChange" />
	</p>
			
	    <select v-model="sel">
		<option value="0">大班</option>
		<option value="1">中班</option>
		<option value="2">小班</option>
	    </select>
	    {{sel}}
	    <br />
	    <input type="checkbox" v-model="danCheck"/>同意用户协议<br />
	    <h1>{{danCheck}}</h1>
	    <input type="checkbox" value="西瓜" v-model="duoCheck" />西瓜
	    <input type="checkbox" value="苹果" v-model="duoCheck" />苹果
	    <input type="checkbox" value="黄瓜" v-model="duoCheck" />黄瓜
	    <h1>{{duoCheck}}</h1>
	    <input type="radio" value="男" v-model="sex"/>男
	    <input type="radio" value="女" v-model="sex" />女
			
	    <hr />
	    <textarea v-model="tarea"></textarea>
	    <h1>{{tarea}}</h1>
	</div>
    </body>
    <script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			sel:'0',
			username: "",
			danCheck:true,
			duoCheck:[],
			sex:'男',
			tarea:'',
		},
		methods: {
			fnChange: function() {
				this.username += 'haha'
			}
		}
	})
    </script>

</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>
</head>

<body>
  <div id="app">
    <input type="text" v-model="n1">

    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" @click="calc">

    <input type="text" v-model="result">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '+'
      },
      methods: {
        calc() { // 计算器算数的方法  
          // 逻辑：
         switch (this.opt) {
            case '+':
              this.result = parseInt(this.n1) + parseInt(this.n2)
              break;
            case '-':
              this.result = parseInt(this.n1) - parseInt(this.n2)
              break;
            case '*':
              this.result = parseInt(this.n1) * parseInt(this.n2)
              break;
            case '/':
              this.result = parseInt(this.n1) / parseInt(this.n2)
              break;
          } 
         
        }
      }
    });
  </script>
</body>

</html>