Vue.js day01

最新推荐文章于 2024-03-28 16:11:03 发布

wz990223

最新推荐文章于 2024-03-28 16:11:03 发布

阅读量83

点赞数

分类专栏： vue day01 文章标签： vue

本文链接：https://blog.csdn.net/wz990223/article/details/118099280

版权

vue day01 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是Vue.js

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也可以进行手机App的开发，需要借助Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于第三方库或既有项目整合。（Vue配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

框架和库的区别

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

node中的express

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

从Jquery 切换到 zepto

从 EJS 切换到 art-template

Node（后端）中的MVC与前端中MVVM之间的区别

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

Vue.js实例化

el:这个控制是哪块试图

data:存放数据

methods:放我们的方法

插值表达式、v-cloak、v-text、v-html的基本使用

插值表达式{{}}，可以在前后插入一些内容
v-cloak：防止加载时出现界面闪烁
v-text：会替换掉元素里的内容
v-html：可以渲染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" >
  <title>Document</title>

  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <!--视图层 -->
  <div id="app">
    <!-- 插值表达式  {{}} -->
    <!-- v-cloak防抖 -->
    <div v-cloak>{{msg}} {{num1+num2}}</div>
    <div>{{text}}{{html}}</div>
    <div v-html="html">11111</div>
    <div v-text="text">2222</div>
  </div>

</body>
</html>
<script src="./vue-2.4.0.js"></script>
<script>
  let vm = new Vue({
    //   控制区域
    el: "#app",
    // 数据
    data: {
      msg: "hello word2!",
      num1: 5,
      num2: 6,
      text: "<h2>哈哈我是H2</h2>",
      html: "<h2 style='color:red'>哈哈我是H2</h2>",
    },
    // 方法
    methods: {},
  });
</script>

V-bind 界面元素属性值的绑定

1. 括号里不加引号的都是我们data里的数据读取

2. 如果想使用字符串需要加上引号

3. 里面可以写表达式

4. 里面也可以调用定义好的方法，拿到的是方法的返回值

5.简写‘：’

<body>
  <div id="app">
    <div title="title">123</div>
    <!-- v-bind  属性绑定-->
    <div v-bind:title="msg">123</div>
    <input type="text" value="haha">
    <input type="text" v-bind:value="msg">
    <input type="text" v-bind:value="'msg'">
    <input type="text" v-bind:value="num1+num2">
    <input type="text" v-bind:value="title1+msg">
    <input type="text" v-bind:value="sum(4,5)">
    <input type="text" :value="sum(4,5)" >
    <button v-on:click="log1">点击打印1</button>
  <!-- 简写 -->
    <button @click="log1">点击打印1</button>
    <div>{{num2}}</div>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        title1: "titleName",
        msg: "这是一个信息",
        num1: 2,
        num2: 3,
      },
      methods: {
        log1() {
          console.log(1);
          // 里面可以直接通过this获取data上的内容
          console.log(this.num2);
          this.num2++;
        },
        sum(a, b) {
          return a + b;
        },
      },
    });
  </script>

V-on 进行事件绑定

简写“@”：@click、@mouseover

跑马灯效果如下：

<!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">
  <script src="./vue-2.4.0.js"></script>
  <title>Document</title>
</head>

<body>
  <div id='app'>
    <button @click='start' :disabled='!dis'>浪起来</button>
    <button @click='stop' :disabled='dis'>别浪</button>
    <p>{{msg}}</p>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      msg: '猥琐发育，别浪!',
      timer: 'null',
      dis: 'true'
    },
    methods: {
      start() {
        this.dis = !this.dis;
        this.timer = setInterval(() => {
          let str1 = this.msg.substring(0, 1);
          let str2 = this.msg.substring(1);
          this.msg = str2 + str1;
        }, 500);
      },
      stop() {
        this.dis = !this.dis;
        clearInterval(this.timer);
      }
    }
  })
</script>

</html>

事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

v-model数据双向绑定

作用：数据双向绑定

注意：绑定的是表单控件

计算器效果案例：

<!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>Document</title>
  <script src="./vue-2.4.0.js"></script>

<body>
  <div id="app">
    <input type="text" v-model:value='num1'>
    +
    <input type="text" v-model:value='num2'>
    <button @click='add'>=</button>
    <input type="text" v-model:value='sum'>
  </div>

</body>

</html>
<script>
  //创建Vue实例,得到 ViewModel
  const vm = new Vue({
    el: '#app',
    data: {
      num1: 0,
      num2: 0,
      sum: 0
    },
    methods: {
      add() {
        this.sum = Number(this.num1) + Number(this.num2)
      }
    }
  });
</script>

Vue中样式的使用

使用class样式:

数组
三木表达式
数组内置对象（对象的键是样式的名字，值是bool类型）
直接通过对象

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象
将样式对象，定义到 data 中，并直接引用到 :style 中
1. 在data上定义样式
2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中
在 :style 中通过数组，引用多个 data 上的样式对象
1. 在data上定义样式
2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中

V-for和key属性

便利数组，参数(item,index) in list
便利对象，参数(value,key,index) in list
便利数字，num in 10 (1~10)
key在使用v-for的时候都需要去设置key

让界面元素和数组里的每个记录进行绑定
key只能是字符串或者数字
key必须是唯一的

v-if与v-show区别

区别：

1. v-if删除dom元素

2. v-show设置display:none

应用场景：

1. v-if只修改一次的时候可以使用v-if

2. v-show频繁切换的时候可以使用v-show

wz990223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js day01

什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也可以进行手机App的开发，需要借助Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于第三方库或既有项目整合。（Vue配套的第三方类库，可以整合起来做大型项目的开发）前端的主要工作？主要负责MVC中的V这一
复制链接

扫一扫

专栏目录