锐客网

  1. 首页 > 睿知 > it技术 > >

Vue基础知识总结（进阶篇）

IT知识基础知识vue基础知识

【Vue基础知识总结（进阶篇）】归志宁无五亩园，读书本意在元元。这篇文章主要讲述Vue基础知识总结：进阶篇相关的知识，希望能为你提供帮助。
1.0 MVVM模式

  • MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
  • MVVM模式将页面,分层了 M 、V、和VM ,解释为：
  • Model: 负责数据存储
  • View: 负责页面展示
  • View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
< body>
    < div id="app">
      < !-- View 视图部分 -->
      < h2> name< /h2>
    < /div>
  < /body>
  < script src="https://www.songbingjia.com/android/js/vue.min.js"> < /script>
  < script>
    //创建的vue实例,就是 VM ViewModel
    var VM = new Vue(
      el: "#app",
      //data就是MVVM模式中的 model
      data:
        name: "hello",
    ,
  );
  < /script>

Vue基础知识总结（进阶篇）

文章图片
< /head>
< body>
< !-- View 视图部分 -->
< div id="app" >
< input type="button" value="https://www.songbingjia.com/android/修改model的数据" @click="change" /> < br>
< !-- 单向绑定 -->
< input type="text" V-bind:value="https://www.songbingjia.com/android/msg" /> < br>
< label> 单向绑定：< /label> msg< br>
< !-- 双向绑定 -->
< input type="text" v-model="msg" /> < br>
< label> 双向绑定：< /label> msg
< /div>
< /body>
< script>
//创建的vue实例,就是 VM ViewModel
var obj = new Vue(
el: "#app",
  //data就是MVVM模式中的 model
data:
msg: "天天好心情",
,
methods:
change:function()
this.msg = "我变了";
,
,
);

< /script>
< /html>
效果展示：
v-model指令总结
  • v-model 指令的作用是便捷的设置和获取表单元素的值
  • 绑定的数据会和表单元素值相关联
  • 双向数据绑定
1.2 实现简单记事本
  1. 功能介绍



  1. 实现步骤
  2. 生成列表结构（v-for）数组
  1. 获取用户输入（v-model双向绑定）
  2. 回车，新增数据（@keyup.enter事件修饰符）
实现源码：
< html>
< head>
< meta http-equiv="content-type" content="text/html; charset=UTF-8" />
< title> 小黑记事本< /title>
< meta http-equiv="content-type" content="text/html; charset=UTF-8" />
< meta name="robots" content="noindex, nofollow" />
< meta name="googlebot" content="noindex, nofollow" />
< meta name="viewport" content="width=device-width, initial-scale=1" />
< link rel="stylesheet" type="text/css" href="https://www.songbingjia.com/css/index.css" />
< /head>

< body>
< !-- VUE示例接管区域 -->
< section id="app">

< !-- 输入框 -->
< header class="header">
< h1> VUE记事本< /h1>
< input
autofocus="autofocus"
autocomplete="off"
placeholder="输入日程"
class="new-todo"
v-model:value="https://www.songbingjia.com/android/msg"
@keyup.enter="add"
/>
< /header>

< !-- 列表区域 -->
< section class="main">
< ul class="listview">
< li class="todo" v-for="(item,index) in content">
< div class="view">
< span class="index"> index + 1< /span> < label> item< /label

    推荐阅读


    上一篇：Java并发编程系列之一并发理论基础

    下一篇：Angular项目实战Angular5项目模块划分