Vue基础知识-1

最新推荐文章于 2024-01-14 20:03:11 发布

panda_pan9527

最新推荐文章于 2024-01-14 20:03:11 发布

阅读量88

点赞数

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

版权

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>

      <h4> 列表渲染特殊数据 </h4>
        <ul>
          <li v-for = "item in 10">
            {{ item }}
          </li>
        </ul>

        <h4> 列表渲染嵌套 </h4>

        <ul>
          <li v-for = "item in banners">
            <p> {{ item.name }} </p>
            <ul>
              <li v-for = "val in item.child">
                {{ val.name }}
              </li>
            </ul>
          </li>
        </ul>
    </div>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: '<div> hello Vue.js</div>',
      flag: false,
      flag1: true,
      type: 'A',
      flag2: false,
      lists: [1,2,3,4],
      obj: {
        id: 1,
        name: 'Gabriel Yan',
        age: 16
      },
      json: [
        {
          id: 1,
          shopName: '商品一'
        },
        {
          id: 2,
          shopName: '商品二'
        },
        {
          id: 3,
          shopName: '商品三'
        }
      ],
      banners: [
        {
          id: 1,
          name: 'banner1',
          child: [
            {
              id: 1,
              name: 'banner1 - 1'
            }
          ]
        },
        {
          id: 2,
          name: 'banner2',
          child: [
            {
              id: 2,
              name: 'banner2 - 2'
            }
          ]
        },
        {
          id: 3,
          name: 'banner3',
          child: [
            {
              id: 3,
              name: 'banner3 - 3'
            }
          ]
        }
      ]
    }
  })
</script>
</html>