Vue基础概念

最新推荐文章于 2023-09-22 00:22:34 发布

idiot_MAN

最新推荐文章于 2023-09-22 00:22:34 发布

阅读量197

点赞数

分类专栏： vue2 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/idiot_MAN/article/details/126923401

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

20 篇文章 1 订阅

订阅专栏

Vue概念

文章目录

Vue概念

为什么学习Vue

更少的时间，干更多的活，开发网站速度快

原生js ---------------jQuery------------Vue

案例：把数组数据–循环渲染到页面上

原生js

  <body>
    <ul id="myul"></ul>
  </body>
  <script>
    let arr = ['aa', 'bb', 'cc', 'dd', 'ee']
    let myUl = document.getElementById('myul')
    for (let i = 0; i < arr.length; i++) {
      let thenLi = document.createElement('li')
      thenLi.innerHTML = arr[i]
      console.log(thenLi)
      myUl.appendChild(thenLi)
    }
  </script>

vue

<body>
    <div id="app">
      <ul>
        <li v-for="item in arr">{{item}}</li>
      </ul>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          arr: ['aa', 'bb', 'cc', 'dd', 'ee'],
        }
      },
    })
  </script>

注意：vue写起来很爽，vue的底层还是原生js

vue开发更加的效率和简洁，易于维护，快快快，现在很多的项目都是用vue开发的

vue是什么

https://vuejs.bootcss.com/guide/

vue2教程:https://v2.cn.vuejs.org/v2/guide/events.html

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

什么是渐进式

渐进式：逐渐进步，想用什么就用什么，不用全部都用

vue从基础开始学习，循序渐进向前学习

声明式渲染—组件系统—路由—vuex

什么是库和框架

库：封装的属性和方法(jquery)

框架：拥有自己的规则和元素，比库强大的多(vue.js)

vue如何学

每天的知识点做到了如指掌，花时间去记住结论和公式（语法）
记住vue指令的作用，基础语法，整理笔记
课上的例子，练习，案例，作业，项目反复的练习
学会查找问题和解决问题（弄个报错总结文档.md）

vue是渐进式的框架，有自己的规则，我们要记住语法，特点和作用，反复练习，多总结

vue的学习

传统的开发模式：

基于html/css/js文件开发vue

线上引入js：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 第一步:引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 第二步：创建vue容器  
    vue的语法代码只能写在下面的div中 -->
    <div id="app"></div>
  </body>
  <!-- 第三步：创建vue实例 -->
  <script>
    // console.log(Vue)
    var vm = new Vue({
      el: '#app', //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
      data: {
        //Vue 实例的数据对象
        msg: 'hello word',
        flag: false,
        arr: [11, 2, 3, 4, 56, 6],
        num: 2,
      },
    })
  </script>
</html>

工程化的开发方式

webpack环境中开发vue，最推荐，企业常用的方式

插值表达式

目的：在dom标签中，直接插入内容

又叫：声明式渲染/文本插值

语法： {{表达式}}

    <div id="app">
      <!-- 插值表达式中不能写循环语法，不能写条件语句 -->
      <p>{{num}}</p>
      <p>{{num+1}}</p>
      <p>{{34}}</p>
      <p>{{flag}}</p>
      <p>{{flag?'hello':"nihao"}}</p>
      <p>{{str}}</p>
      <p>{{str +"vue是必须要学会的"}}</p>
      <p>{{'hello world'}}</p>
      <p>{{arr}}</p>
      <p>{{arr.reverse()}}</p>
      <p>{{obj}}</p>
      <p>{{obj.name}}</p>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        num: 3,
        flag: false,
        str: '大家一定要好好学习vue',
        arr: [11, 22, 333, 44],
        obj: {
          name: 'zs',
          age: 12,
        },
      },
    })
  </script>

总结：dom中插值表达式赋值，vue的变量必须在data中声明

vue基础-MVVM设计模式

转变思想，用数据驱动视图改变; 操作dom的事，vue源码干了

设计模式:一套被反复使用，多数人知晓的，经过分类编目的，代码设计经验的总结

MVVM

一种软件架构模式，决定了写代码的思想和层次

M : model 数据模型 (data中定义)

V ：view视图（html页面）

VM：ViewModel 视图模型(vue.js源码)

MVVM通过数据双向绑定让数据自动双向同步，不再需要操作DOM

V （修改视图）-----> M(数据自动同步)

M（修改数据）------>V（视图自动同步）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2oQDJsMH-1663507330660)(.\相册\vue概念\MVVM.png)]

总结：vue源码采用MVVM设计模式思想，大大减少了DOM操作，提高开发效率

Vue指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute

每个指令，都有独立的作用

v-bind

给标签属性设置变量的值

语法: v-bind:属性名=“vue变量”

简写： :属性名=“vue变量”

  <body>
    <div id="app">
      <!-- v-bind  属性绑定：   把vue变量的值，赋予给dom属性上，影响标签的显示效果 -->
      <a v-bind:href="url">我是a标记</a>
      <a :href="url">我是a标记</a>

      <hr />
      <img v-bind:src="imgurl" alt="" />
      <img :src="imgurl" alt="" />
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        url: 'http://www.baidu.com',
        imgurl: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
      },
    })
  </script>

v-on

给标签绑定事件

语法：

v-on:事件名=“要执行的少量代码”
v-on:事件名=“methods中的函数”
v-on:事件名=“methods中的函数(实参)”
简写：@事件名=“methods中的函数”

<body>
    <div id="app">
      <!--  v-on 事件绑定 -->
      <p>要购买的商品的数量{{count}}</p>
      <button v-on:click="count=count+1">增加1</button>
      <button v-on:click="addFn">增加1</button>
      <button v-on:click="addCount(5)">一次增5</button>

      <button @click="subFn">减1</button>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 2,
      },
      methods: {
        //专门用来定义函数（方法）的
        addFn() {
          //this代表的是当前的vue实例对象
          console.log(this)
          this.count++
        },
        addCount(num) {
          this.count += num //
        },
        subFn() {
          this.count--
        },
      },
    })
  </script>

v-text/v-html

更新DOM对象的einnerText和innerHTML

语法:

v-text=“vue数据变量”
v-html=“vue数据变量"

<body>
    <div id="app">
      <p>{{str1}}</p>
      <p>{{str2}}</p>
      <hr />
      <p v-text="str1"></p>
      <p v-text="str2"></p>
      <hr />
      <p v-html="str1"></p>
      <p v-html="str2"></p>
      <!--  v-text把值当做普通字符串显示 
      
            v-html 把值当做html解析
      -->
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        str1: '<span>我是一个span标签</span>',
        str2: 'hello',
      },
      methods: {},
    })
  </script>

  <p v-html="str2"></p>
  <!--  v-text把值当做普通字符串显示 
  
        v-html 把值当做html解析
  -->
</div>

```

idiot_MAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础概念

渐进式：逐渐进步，想用什么就用什么，不用全部都用 vue从基础开始学习，循序渐进向前学习声明式渲染—组件系统—路由—vuex库：封装的属性和方法(jquery)框架：拥有自己的规则和元素，比库强大的多(vue.js)
复制链接

扫一扫