VUE-day01-vue基础使用

最新推荐文章于 2024-05-20 17:02:17 发布

VIP文章疾风小蜗牛

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量301

点赞数

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

本文链接：https://blog.csdn.net/Wr2138/article/details/126942308

版权

1、什么是vue.js ？

Vue.js是一套构建用户界面的渐进式框架。与其他轻量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

vue.js是前端的支流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架

2、为什么学习流行框架？

企业为了提高开发效率：在企业4E2D，时间就是效率，效率就是金钱；

企业中，使用框架，能够提高开发的效率；

提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js

能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】

在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑

3、框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

例如：从Jquery 切换到 Zepto(与jQuery差不多，但是是向上兼容的)

4、MVC与MVVM的区别

MVC 是后端的分层开发概念;

MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

5、vue.js的代码结构

引入vue.js

写视图层（要展示的内容）

实例化 Vue()

1、data：存放数据

2、el：这个控制是哪块视图

3、methods：方法

注意：写方法时要注意this的指向问题

6、插值表达式、v-cloak、v-text、v-html

v-claok：可以解决页面闪烁的问题

示例：

<!DOCTYPE html>
<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>2-页面闪烁</title>
    <!-- <script src="./vue-2.4.0.js"></script> -->
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <div>{
  {msg}}</div> -->
      <div v-cloak>{
  {msg}}</div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: "#app",
      data: {
        msg: "页面会不会闪烁呢？",
      },
      methods: {},
    });
  </script>
</html>

如何获取变量值呢？

1、插值表达式 { { }} 可以在前后插入一些内容

2、v-text：会覆盖标签里面的内容不可以解析富文本

3、v-html：会覆盖标签里面的内容可以解析富文本

示例：

<!DOCTYPE html>
<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" />
    <!-- 1、引入 -->
    <script src="./vue-2.4.0.js"></script>
    <title>vue</title>
  </head>
  <body>
    <!-- 2、视图层 -->
    <div id="app">
      <!-- 插值表达式 {
  { }} -->
      {
  {msg}}---{
  {num + 8}}
      <button @click="log"> 点我 </button>


      <!-- v-html 会覆盖标签里面的内容 可以解析富文本 -->
      <!-- v-text 会覆盖标签里面的内容 不能解析富文本 -->
      <div v-html="html">11111</div>
      <div v-text="html">22222</div>
    </div>
    <div id="app2">
      {
  {msg}}
    </div>
  </body>
  <script>
    /* 
    vue：数据驱动视图
    a)	引入vue.js
    b)	写视图层，我们要展示的内容
    c)	实例化Vue()
          data：存放数据
          el：这个控制是哪块视图
          methods：放我们的方法

  */
    // 3、实例化Vue
    let vm = new Vue({
      // 控制区域 
      el: "#app",
      // 数据
      data: {
        msg: "hello world",
        num:5,
        html:'<h1 style="color:red;">我是h1</h1>',  // 带有标签和样式的字符串叫做富文本
      },
      // 方法
      methods: {
        log(){
          console.log(1);
        }
      },
    });
  </script>
</html>