Vue基础知识-2

最新推荐文章于 2020-10-11 23:19:56 发布

panda_pan9527

最新推荐文章于 2020-10-11 23:19:56 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/panda_pan9527/article/details/97303158

版权

本文介绍了Vue的基础知识，包括Vue的渐进式特性、版本历史和MVC/MVVM架构思想。详细讲解了Vue的源代码结构，并提出学习Vue应避免直接操作DOM，转而使用指令。文章重点探讨了Vue的指令系统，如数据展示（v-html、v-text）、条件渲染（v-if、v-else、v-show、v-for）、单向和双向数据绑定（v-bind、v-model）、事件处理和修饰符，以及计算属性和watch的使用案例。

摘要由CSDN通过智能技术生成

Vue的介绍

作者：尤雨溪
vue是一个渐进式的javascript框架

渐进式：越来越难学
vue是一个个人项目
Vue版本发布的时间
- Vue 1.x 2014
- Vue 2.x 2016 【 es6 vue 微信小程序 angular2.0 …

MVC是一个软件的架构思维，分为三个部分
- M Model 数据
- V View 视图
- C Controller 控制器
- MVC衍生
mvc backbone 【前端框架】
mvp
mvvm Vue Angular.ts 【 Angular2.0】
ember

MVVM

M Model 数据
V View 视图
VM ViewModel 视图模型
V的变化会反应到VM上，反之同理，也就是vm的改变也会影响V

Vue的源代码

行数： 11945 开发环境
Vue的源代码是通过匿名函数【自调用函数】来进行封装

匿名函数好处
- 解决了命名冲突
- 规定了一个独立的作用域
- 安全性高
  - xss 攻击脚本
  - CRSF 攻击脚本
格式

//第一个括号表示定义一个匿名函数
//第二个括号表示调用这个函数 
//参数： 第一个括号中的参数为 形式参数
//第二个括号中的参数为 实际参数
//this - 指的就是window对象
//factory - 工厂函数   返回值就是Vue构造函数
//el不能是body
//Vue是通过面向对象原型继承 + 工厂函数进行底层代码封装的 
(function ( global,factory) {

})( this,function () {})

Vue学习的思路

Vue有指令和组件系统两个大功能
通过js想操作DOM - > Vue也想操作DOM

问题： Vue中不建议像二阶段一样直接去操作DOM
解决：方案：指令

指令

数据展示

v-html 可解读XML标签

v-text

条件渲染

单分支 v-if
双分支

v-if

v-else 必走一条
多分支

v-if = “type === ‘条件1’”

v-else-if = “type ===‘条件2’”

v-else//其他条件
条件展示

v-show
v-if vs v-show的比较
- v-if是真正的控制dom的存在与否，v-show 是控制dom的display:none属性
- 如果初始条件都为false,v-if会惰性渲染【不渲染】，但是v-show不管条件是什么都会渲染，所以v-show的初始渲染开销较高
- 如果我们要频繁的切换flag,那么我们使用谁? 我们使用 v-show ，反之，使用v-if
渲染数组
- v-for = “(item,index) in 数组名”
对象的渲染
- v-for = “(item,index) in 对象名”
JSON的渲染
- v-for = “(item,index) in JSON名”
特殊数据的渲染
- v-for = “item in 10”

特殊数据的渲染

嵌套

<!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> 指令 </title>
  <style>
    .container{
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <h3> 数据展示 </h3>
        <p> {
      { msg }} </p>
        <p v-html = "msg"></p>
        <p v-text = "msg"></p>
      <hr>
      <h3> 条件渲染 </h3>
        <h4> 条件渲染 - 单路分支 </h4>
        <p v-if = "flag"> 条件 - 单路分支 </p>

        <h4> 条件渲染 - 双路分支 </h4>
        <p v-if = "flag1"> 条件 - 双路 - 1 </p>
        <p v-else> 条件 - 双路 - 2 </p>

        <h4> 条件渲染 - 多路分支 </h4>
        <p v-if = " type === 'A'"> 条件 - A </p>
        <p v-else-if = "type === 'B'"> 条件 - B </p>
        <p v-else> 条件 - C </p>
      <hr>
      <h3> 条件展示 </h3>
        <p v-show = "flag2"> 条件 - 展示 </p>

      <hr>

      <h3> 列表渲染 </h3>
      <h4> 数组 </h4>
        <ul>
          <li v-for = " (item,index) in lists">
            {
      { item }} -- {
      { index }}
          </li>
        </ul>
      <h4> 对象 </h4>
        <ul>
          <li v-for = " (value,key,index) in obj ">
            {
      { value }} --- {
      { key }} --- {
      { index }}
          </li>
        </ul>

      <h4> json  </h4>
        <ul>
          <li v-for = "(item,index) in json">
            <p> 商品名称： {
      { item.shopName }} -- {
      { index }} -- {
      { item.id }} </p>
          </li>
        </ul>