Loading [MathJax]/jax/output/CommonHTML/fonts/TeX/AMS-Regular.js
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >Vue学习笔记(一)

Vue学习笔记(一)

作者头像
赤蓝紫
发布于 2023-01-01 09:38:50
发布于 2023-01-01 09:38:50
4.5K0
举报
文章被收录于专栏：clzclz
关联问题
换一批
Vue的生命周期钩子函数有哪些？
如何在Vue中实现数据绑定？
Vue组件之间如何通信？

Vue 学习笔记(一)

1. vue 简介

Vue 是一套用于构建用户界面的前端框架

1.1 vue 的两个特性

  1. 数据驱动视图
    • 使用了 vue 的页面，vue 会监听数据的变化，自动重新渲染页面的结构
    • 数据驱动视图是单向的数据绑定，即只能由数据来影响页面结构
  2. 双向数据绑定
    • 填写表单时，双向数据绑定可以让开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中

1.2 MVVM

vue 实现数据驱动视图和双向数据绑定的核心原理。

M 指的是 Model，V 指的是 View，VM 指的是 ViewModel

​ Model：表示当前页面渲染时依赖的数据源

​ View：表示当前页面所渲染 DOM 结构

​ ViewModel：表示 vue 的实例，是 MVVM 的核心

MVVM 的工作原理：ViewModel 作为 MVVM 的核心，它把当前页面的数据源(Model)和页面的结构(View)连在一起。

  • 当数据源发生变化时，会被 ViewModel 监听到，VM 会自动更新页面的结构
  • 当表单元素的值发生变化时，也会被 VM 监听到，VM 会把更新的值自动同步到数据源(Model)中

2. vue 的基本使用

步骤

  1. 导入 vue.js 文件
  2. 在页面中声明要被 vue 操作的 DOM 区域
  3. 创建 vue 实例对象

3. vue 的指令

指令是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

按照用途可分为 6 大类：

  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件绑定指令
  6. 列表渲染指令

3.1 内容渲染指令

v-text

会覆盖元素内默认内容

代码语言：javascript
AI代码解释
复制
<div id="app">
  <p v-text="username">姓名：</p>
  <!-- 这里的姓名会被直接覆盖成下面数据源中的username -->
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      username: "clz",
    },
  });
</script>

插值表达式{{}}

不会覆盖元素内默认内容

代码语言：javascript
AI代码解释
复制
<div id="app">
  <p>姓名：{{ username }}</p>
  <!-- 下面数据源中的username会被渲染到姓名后面 -->
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      username: "clz",
    },
  });
</script>

v-html

可以把包含 html 标签的字符串渲染成页面的 HTML 元素

代码语言：javascript
AI代码解释
复制
<div id="app">
  <p>{{ test_v_html }}</p>
  <p v-text="test_v_html"></p>
  <p v-html="test_v_html"></p>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      test_v_html: '<b style="color: red">Hello!</b>',
    },
  });
</script>

结果：

3.2 属性绑定指令

为元素的属性动态绑定属性值时，需要用到v-bind属性绑定指令

简写形式”:”

vue 提供的模板渲染语法，除了支持绑定简单的数据之外，还支持 Javascript 表达式的运算

代码语言：javascript
AI代码解释
复制
<div id="app">
  <div>1 + 1 = {{ 1 + 1 }}</div>

  <div>{{ hello }} 反转后: {{ hello.split('').reverse().join('') }}</div>

  <div :title="'box' + index">鼠标悬浮一下</div>
  <!-- 使用属性绑定指令时，进行字符串拼接的字符串需要使用嵌套引号 -->
  <!-- 否则，会到data中找要渲染的数据，找不到会报错 -->
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      hello: "Hello World!",
      index: 3,
    },
  });
</script>

3.3 事件绑定指令

vue 提供v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。

代码语言：javascript
AI代码解释
复制
<div id="app">
  <h2>count的值是: {{ count }}</h2>
  <button v-on:click="addCount">+1</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      count: 0,
    },
    methods: {
      //事件处理函数放在methods节点里
      // addCount: function () {
      //     this.count++;
      // }
      addCount() {
        //简便方式
        this.count++;
      },
    },
  });
</script>

v-on 事件绑定指令简写形式”@”，而且如果事件处理函数的代码只有一行，可以直接写在行内

代码语言：javascript
AI代码解释
复制
<div id="app">
  <h2>count的值是: {{ count }}</h2>
  <button @click="count += 1">+1</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      count: 0,
    },
  });
</script>

事件参数对象：通过 e.target 使被点击的按钮变色

代码语言：javascript
AI代码解释
复制
<div id="app">
  <h2>count的值是: {{ count }}</h2>
  <button @click="addCount">+1</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      count: 0,
    },
    methods: {
      addCount(e) {
        this.count++;
        e.target.style.backgroundColor = "red";
      },
    },
  });
</script>

传参：

代码语言：javascript
AI代码解释
复制
<div id="app">
  <h2>count的值是: {{ count }}</h2>
  <button @click="addCount(3)">+3</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      count: 0,
    },
    methods: {
      addCount(step) {
        this.count += step;
      },
    },
  });
</script>

可实现传参后，可以发现事件参数对象被参数覆盖了，而 vue 提供一个特殊变量**event，用来表示原生的事件参数对象event，然后手动把event**当成参数传进去用。

代码语言：javascript
AI代码解释
复制
<div id="app">
  <h2>count的值是: {{ count }}</h2>
  <button @click="addCount($event, 3)">+3</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      count: 0,
    },
    methods: {
      addCount(e, step) {
        e.target.style.backgroundColor = "red";
        this.count += step;
      },
    },
  });
</script>

事件修饰符：vue 提供了事件修饰符的概念，辅组程序员更方便地对事件的触发进行控制

按键修饰符：在监听键盘事件时，如果需要判断详细的按键，可以为键盘相关事件添加按键修饰符

代码语言：javascript
AI代码解释
复制
<div id="app">
  <input type="text" @keyup.esc="clearIpt" />
  <!-- 通过按键修饰符可以判断详细的按键 -->
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
    },
    methods: {
      clearIpt(e) {
        e.target.value = "";
      },
    },
  });
</script>

3.4 双向绑定指令

用来辅助开发者在不操作 DOM的前提下，快速获取表单的数据

代码语言：javascript
AI代码解释
复制
<div id="app">
  <h2>用户名是: {{ username }}</h2>

  <input type="text" v-model="username" />
  <!-- 在input中填入的数据会让h2中的数据实时变化 -->
  <!-- 可以添加修饰符.lazy,实现在"change"时才更新，比如，用户把焦点移出input了 -->
  <input type="text" v-model.lazy="username" />
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      username: "clz",
    },
  });
</script>

v-model 指令的修饰符

代码语言：javascript
AI代码解释
复制
<div id="app">
  <input type="text" v-model.number="n1" /> +
  <input type="text" v-model.number="n2" /> =
  <span>{{ n1 + n2 }}</span>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      n1: 1,
      n2: 2,
    },
  });
</script>

3.5 条件渲染指令

条件渲染指令用来辅助开发者按需来控制 DOM 的显示与隐藏。

有两个条件渲染指令

  • v-if
  • v-show
代码语言：javascript
AI代码解释
复制
<div id="app">
  <!-- v-if和v-show都是根据"="后的部分为true或false来决定是显示还是隐藏-->
  <!-- 为true时显示，为false时隐藏 -->
  <p v-if="flag">v-if</p>
  <p v-if="flag">v-if</p>
  <p v-show="flag">v-show</p>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      flag: false,
    },
    methods: {},
  });
</script>

区别：

实现原理不同：

  • v-if 是通过动态创建或移除 DOM 元素来控制元素在页面上的显示与隐藏，隐藏后，还贴心的把隐藏的节点所在的位置变为空注释，暗示有东西藏着
  • v-show 指令会动态为元素添加或移除 style=”display: none;”样式，来控制元素的显示与隐藏

性能消耗不同：

  • v-if 的切换开销更高，而 v-show 的初始渲染开销更高
  • 需要频繁切换，使用 v-show
  • 运行时条件很少变化，用 v-if

v-if 可以单独使用，也可以搭配 v-else、v-else-if 使用

代码语言：javascript
AI代码解释
复制
<div id="app">
  <select v-model="type">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
  </select>
  <p v-if="type === 'A'">优秀</p>
  <p v-else-if="type === 'B'">良好</p>
  <p v-else-if="type === 'C'">及格</p>
  <p v-else>差</p>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      type: "A",
    },
    methods: {},
  });
</script>

3.6 列表渲染指令

v-for 列表渲染指令，用于实现基于一个数组来渲染一个列表结构。v-for 指令需要使用item in items形式的特殊语法，items 是要循环的数组，item 是循环的每一项

v-for 指令支持一个可选的第二个参数，即当前项的索引。语法为 (item, index) in items

需要为每一项提供唯一的 key 属性，用于维护列表的状态

代码语言：javascript
AI代码解释
复制
<div id="app">
  <table class="table table-bordered table-hover table-striped">
    <thead>
      <th>索引</th>
      <th>Id</th>
      <th>姓名</th>
    </thead>
    <tbody>
      <tr v-for="(user, index) in list" :key="user.id">
        <td>{{ index }}</td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app", //表示操作的区域，值是选择器
    data: {
      //Model数据源
      list: [
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "李四",
        },
        {
          id: 3,
          name: "王五",
        },
      ],
    },
    methods: {},
  });
</script>

key 的注意事项：

  1. key 的值只能是*字符串或数字类型
  2. key 的值必须具有唯一性
  3. 建议把数据项的 id 属性作为 key 的值(因为 id 属性的值具有唯一性)
  4. 使用 v-for 指令时一定要指定 key 的值(既可以提升性能，又可以防止列表状态混乱)
  5. 使用 index 的值作为 key 的值没有意义(因为 index 的值不具有唯一性) index 的值看起来像是具有唯一性，但是这个是假唯一性 例子： 现在又一个数组 list，list=[“张三”，”李四”]，假如选择 index 作为 key 值的话，选择 key=1,即现在选中了李四，这个时候在数组的头那里插入一个新人”王五”，那么李四的 key 值将会变成 2,而之前选的是 key 为 1 的，所以，张三就篡位了。

4. 过滤器

过滤器常用于文本的格式化，可用于插值表达式和v-bind 属性绑定

过滤符由**管道符”|”**进行调用

在 filters 节点下定义的过滤器，是私有过滤器，只能在当前的 vm 实例所控制的 el 区域内可以使用。要实现多个 vue 实例之间共享过滤器，可以定义全局过滤器。

注意，全局过滤器要放在要用到的 vm 实例之前

注意，查看上面的结果可以发现，只有 vm2 控制的区域后面会跟着”全局版本”,这是因为 vm 也有一个私有过滤器 mychange，所以 vm 就直接用自己的了（懒得再去全局那里拿来用）

过滤器可以串联的进行调用。

代码语言：javascript
AI代码解释
复制
{
  {
    message | fileterA | filterB;
  }
} //先把message的值给过滤器filterA处理，之后把处理的结果给B处理，最后再把最后的结果渲染到页面上

过滤器可以传参：过滤器本质是函数，可以传参，只不过，第一个参数已经规定好了，是管道符”|”之前的数据。

5. 侦听器

允许开发者监视数据的变化，从而针对数据的变化做特定的操作

代码语言：javascript
AI代码解释
复制
<div id="app">
  <input type="text" v-model="username" />
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      username: "admin",
    },
    watch: {
      username(newVal, oldVal) {
        //要监听谁，就把谁的名字作为方法名，新值在前，旧值在后
        console.log(newVal, oldVal);
      },
    },
  });
</script>

5.1 immediate 选项

默认情况下，组件在初次加载完时，不会调用 watch 侦听器。想要 watch 侦听器立即被调用，需要把immediate选项变为 true(默认值为 false)，这个时候的侦听器应该是对象形式的。

代码语言：javascript
AI代码解释
复制
<div id="app">
  <input type="text" v-model="username" />
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      username: "admin",
    },
    watch: {
      username: {
        //对象形式
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        immediate: true, //实现初次加载完成时也会调用监听器
      },
    },
  });
</script>

5.2 deep 选项

如果 watch 监听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。（就像是监视一个人，只能看到他干了什么，没法看到他里面的消化系统在干什么），这个时候需要把deep 选项变为 true

代码语言：javascript
AI代码解释
复制
<div id="app">
  <input type="text" v-model="info.username" />
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      info: {
        username: "admin",
      },
    },
    watch: {
      info: {
        handler(newVal) {
          console.log(newVal.username);
        },
        immediate: true,
        deep: true,
      },
    },
  });
</script>

上面的例子，如果只是想监听单个属性的变化，可以不变化 deep 选项，按以下方式即可

代码语言：javascript
AI代码解释
复制
<div id="app">
  <input type="text" v-model="info.username" />
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      info: {
        username: "admin",
      },
    },
    watch: {
      "info.username": {
        //监听单个属性需要用字符串形式
        handler(newVal) {
          //这个时候的新值newVal，就是属性变化后的值
          console.log(newVal);
        },
        immediate: true,
      },
    },
  });
</script>

6. 计算属性

计算属性是指通过一系列计算之后，最终得到一个属性值，这个动态计算出来的属性值可以被模板结构或 methods 方法使用。

特点：

  1. 计算属性声明的时候被定义为方法，但是计算属性的本质是一个属性
  2. 只要计算属性依赖的数据源变化了，那么计算属性就会自动重新求值
代码语言：javascript
AI代码解释
复制
<!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>Myself</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div>
        <span>R: </span>
        <input type="text" v-model.number="r" />
      </div>

      <div>
        <span>G: </span>
        <input type="text" v-model.number="g" />
      </div>

      <div>
        <span>B: </span>
        <input type="text" v-model.number="b" />
      </div>

      <hr />

      <div class="box" :style="{backgroundColor: rgb}">
        {{ rgb }}
        <!-- 使用时，就和普通属性一样用法 -->
      </div>
      <button @click="showColor">按钮</button>
    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          r: 0,
          g: 0,
          b: 0,
        },
        methods: {
          showColor() {
            console.log(this.rgb);
          },
        },
        computed: {
          rgb() {
            //计算属性，声明时是函数形式
            return `rgb(${this.r}, ${this.g}, ${this.b})`;
          },
        },
      });
      console.log(vm);
    </script>
  </body>
</html>

7. axios

axios 是一个专注于数据请求的库。

基本使用：

安装命令

npm install axios -S

代码语言：javascript
AI代码解释
复制
<script src="lib/axios.js"></script>
<script>
  //axios()方法返回一个promise对象
  axios({
    method: "get", //请求方式
    url: "http://www.liulongbin.top:3006/api/getbooks", //请求路径
  }).then((result) => {
    console.log(result); //这里得到的result不是得到的数据，result.data才是，result是数据被axios包装后得到的
    console.log(result.data);
  });
</script>

发起 get 请求

代码语言：javascript
AI代码解释
复制
<script src="lib/axios.js"></script>
<script>
  //axios()方法返回一个promise对象
  axios({
    method: "get", //请求方式
    url: "http://www.liulongbin.top:3006/api/getbooks", //请求路径
    params: {
      //查询参数，即请求方式为get时的参数
      id: 1,
    },
    // data: {
    //     //请求体参数：post时的参数，和params二选一
    // }
  }).then((result) => {
    console.log(result.data);
  });
</script>

发起 post 请求

代码语言：javascript
AI代码解释
复制
<button>发起POST请求</button>
<script src="lib/axios.js"></script>
<script>
  document.querySelector("button").addEventListener("click", async () => {
    // //axios()方法返回一个promise对象
    // axios({
    //     method: 'post', //请求方式
    //     url: 'http://www.liulongbin.top:3006/api/post', //请求路径

    //     data: {
    //         name: '张三',
    //         age: 11
    //     }
    // }).then((result) => {
    //     console.log(result.data);
    // })

    //不用then，简化版本
    //如果调用某个方法的返回值时Promise实例，则前面可以加await
    //await只能在被async修饰的方法中
    const { data: result } = await axios({
      //使用解构赋值,把data属性结构出来,并重命名为result
      method: "post",
      url: "http://www.liulongbin.top:3006/api/post",

      data: {
        name: "张三",
        age: 11,
      },
    });
    console.log(result);
  });
</script>

7.1 axios.get()

语法：

代码语言：javascript
AI代码解释
复制
axios.get("url地址", {
  params: {
    get参数,
  },
});

代码语言：javascript
AI代码解释
复制
<button class="get">get</button>
<script src="lib/axios.js"></script>
<script>
  document.querySelector(".get").addEventListener("click", async () => {
    const { data: result } = await axios.get(
      "http://www.liulongbin.top:3006/api/getbooks",
      {
        params: {
          id: 1,
        },
      }
    );
    console.log(result.data);
  });
</script>

7.2 axios.post()

语法：

代码语言：javascript
AI代码解释
复制
axios.post("url", {
  请求体参数, //注意，这里不需要写在data里面
});

代码语言：javascript
AI代码解释
复制
<button class="post">post</button>
<script src="lib/axios.js"></script>
<script>
  document.querySelector(".post").addEventListener("click", async () => {
    const { data: result } = await axios.post(
      "http://www.liulongbin.top:3006/api/post",
      {
        name: "张三",
        age: 21,
      }
    );
    console.log(result);
  });
</script>

学习链接：

黑马程序员 Vue 全套视频教程

Vue.js (vuejs.org)

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-10-01，如有侵权请联系 cloudcommunity@tencent.com 删除
渲染
javascript
node.js
vue.js
编程算法

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

渲染
javascript
node.js
vue.js
编程算法
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
8854
Go 开发者必备：Protocol Buffers 入门指南
5576
10分钟带你彻底搞懂分布式链路跟踪
4438
多租户的 4 种常用方案
8025
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
5677
60页PPT全解：DeepSeek系列论文技术要点整理
7289
Vue的基本使用
domeventkeymvvmtext
前端开发者最主要的工作，就是为网站的使用者（又称为：网站的用户）构建出美观、舒适、好用的网页。
岳泽以
2022/10/26
2.8K0
Vue的基本使用
【VUE】基础用法(属性与事件的绑定，条件渲染等)
渲染编程算法vue.js
在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。
坚毅的小解同志的前端社区
2022/12/13
1.9K0
【VUE】基础用法(属性与事件的绑定，条件渲染等)
Vue初步认识与Vue基础指令
vue.js
Vue.set()方法有三个参数，分别是数组，索引，新内容，用这个办法可以代替操作，以实时更新视图
conanma
2021/11/04
3.6K0
前端网页技术之 Vue
vue.jshtmlnode.js编程算法ajax
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。
全栈程序员站长
2022/07/05
3.5K0
前端网页技术之 Vue
教育平台项目前端：Vue.js 入门
ajaxjavascriptnode.jsvue.jshtml
Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用。
RendaZhang
2020/09/08
4.6K0
2.vue常用指令
语法渲染script事件数据
注意：写插值语句的时候，只有的id=app的元素下面才可以使用插值语句，所以，尽可能创建一个标签，将所要渲染的数据，都写入当前标签中
张哥编程
2024/12/13
3650
2.vue常用指令
vue学习笔记(1)－－什么是vue?
vue.js打包html渲染
打开console，输入app.message = "hello"，页面会改变内容只显示hello
子舒
2022/06/09
6450
vue学习笔记(1)－－什么是vue?
vue双向绑定指令[通俗易懂]
binddommodelvue3
v-model:双向绑定，既有数据源到页面，也有页面到数据源，在不操作DOM的前提下，快速获取表单的数据(v-bind是单向绑定，只有数据源到页面）
全栈程序员站长
2022/10/05
7800
vue双向绑定指令[通俗易懂]
Vue
jsonjavahttps网络安全html
通过前面的介绍，我们对目前的项目工程化有了大体了了解，那么其中，在第二阶段的工程化演进中，有一个重要的工程设计理念诞生，他就是著名的 MVC 设计模式，简单点，MVC 其实就是为了项目工程化的一种分工模式；
jinghong
2020/05/12
7.7K0
Vue
Vue & Element
渲染vue.jsjavascript
Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写。Vue 基于 MVVM(Model-View-View-Model) 思想，实现数据的双向绑定，将编程的关注点放在数据上。
小简
2023/01/04
6K0
Vue & Element
Vue快速入门（一）
编程算法jqueryvue.jshtmljavascript
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
HammerZe
2022/05/09
1K0
Vue快速入门（一）
后端小白的 Vue 入门笔记 —— 基础篇
vue.js编程算法htmlcsshttp
出处：https://www.cnblogs.com/ZhuChangwu/p/11303521.html
IT技术小咖
2019/08/20
2.4K0
Vue 学习笔记 —— 模板语法 （一）
vue.js打包html编程算法
我们在使用插值表达式的时候，游览器第一次渲染的时候可能会出现一下 表达式的字符串，然后就被替换 data 中的数据内容，这种情况解决就如官方文档的方式皆可以解决了。
Gorit
2021/12/08
1.8K0
Vue 学习笔记 —— 模板语法 （一）
Vue 核心基础（2.X）
vue.js编程算法
一、Vue 的基本认识 20201225195043.png 官网： 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 1、Vue 的特点 遵循MVVM 模式 编码简洁，体积小，运行效率高，适合移动/ PC 端开发 它本身只关注 UI， 可以轻松的引入 vue 插件或其他的第三库开发项目 二、Vue 的基本使用 永远的 HelloWord 编码： <div id="app"> <input type="text" v-model="username
OY
2022/03/18
1.9K0
Vue 核心基础（2.X）
【初级】个人分享Vue前端开发教程笔记
渲染打包vue.jsnode.jsjavascript
每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！
达达前端
2021/02/04
5.2K0
JavaWeb Day11 Vue快速入门
htmlvue.js渲染网站
我们之前也学习过后端的框架 Mybatis ，Mybatis 是用来简化 jdbc 代码编写的；而 VUE 是前端的框架，是用来简化 JavaScript 代码编写的。
小小程序员
2023/03/07
4.1K0
JavaWeb Day11 Vue快速入门
Vue
渲染script对象前端数据
1、Vue.js目前最火的的一个前端框架，三大主流前端框架之一。 2、Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。 3、提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。
xiaozhangStu
2023/08/23
3580
懂个锤子Vue
vuejs2前端框架腾讯技术创作特训营S8javascriptvue.js
本篇文章会持续更新，至Vue3.0+TS 整个前后端架构生态笔记，请多多关注； 当个笔记看也好鸭~ 本篇文章学习于尚硅谷，快速跳转 最近互联网环境真的爆炸啊，为了多一口饭吃还是赶紧学一下前端吧 前置知识： 此篇并不适合初学者，学习Vue之前，还需掌握：HTML+CSS+JS 前端三件套； 分享个人一些📄：JavaScript、 JavaScript新特性、前后端交互ajax、前端工程\模块化
Java_慈祥
2024/07/23
4240
懂个锤子Vue
vue入门教程（一）「建议收藏」
编程算法vue.jshtml缓存
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
全栈程序员站长
2022/09/05
1.7K0
Java学习笔记-全栈-web开发-24-Vue
htmlnode.jsvue.jswebpacknpm
jq利用DOM操作，降低了ajax请求函数的复用性（js与html耦合性太高）。 而vue通过框架提供的指令实现数据双向绑定，我们只需要关注业务逻辑，而不需要直接操作DOM元素。
devi
2021/08/18
1.5K0
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
ES[7.6.x]学习笔记（八）数据的增删改 中有错误？C#零基础学习笔记001-数据类型和变量？怎么学习？
相关课程
JavaAI绘画-StableDiffusion图像生成前端
Vue的基本使用
2.8K0
【VUE】基础用法(属性与事件的绑定，条件渲染等)
1.9K0
Vue初步认识与Vue基础指令
3.6K0
前端网页技术之 Vue
3.5K0
教育平台项目前端：Vue.js 入门
4.6K0
2.vue常用指令
3650
vue学习笔记(1)－－什么是vue?
6450
vue双向绑定指令[通俗易懂]
7800
Vue
7.7K0
Vue & Element
6K0
Vue快速入门（一）
1K0
后端小白的 Vue 入门笔记 —— 基础篇
2.4K0
Vue 学习笔记 —— 模板语法 （一）
1.8K0
Vue 核心基础（2.X）
1.9K0
【初级】个人分享Vue前端开发教程笔记
5.2K0
JavaWeb Day11 Vue快速入门
4.1K0
Vue
3580
懂个锤子Vue
4240
vue入门教程（一）「建议收藏」
1.7K0
Java学习笔记-全栈-web开发-24-Vue
1.5K0
相关推荐
Vue的基本使用
更多 >
赤蓝紫0
LV.1
这个人很懒，什么都没有留下～
文章
159
获赞
349
专栏
1
作者相关精选
换一批
交个朋友
加入腾讯云官网粉丝站
双11活动抢先看 更有社群专属礼券掉落
加入讨论
的问答专区 >
羑悻的小杀马特.0
相关课程
一站式学习中心 >
Java
2357人在学
java
AI绘画-StableDiffusion图像生成
1729人在学
腾讯混元生图
高性能应用服务
前端
1407人在学
前端
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
2
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网