Vue入门

最新推荐文章于 2022-10-25 20:57:15 发布
最新推荐文章于 2022-10-25 20:57:15 发布
阅读量179 收藏
点赞数
分类专栏： JAVA单体架构项目案例介绍 文章标签： vue js java html
原文链接：https://edu.lagou.com/
版权

1.Vue.js 介绍

1.1 Vue.js是什么？

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，
  • Vue 被设计 为可以自底向上逐层应用.
  • Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
  • 自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)

1.2 为甚么使用Vue？

  • 声明式渲染: 前后端分离是未来趋势
  • 渐进式框架: 适用于各种业务需求
  • 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

1.3 Vue.js的使用

1.3.1 在html页面使用script引入vue.js的库即可使用

远程CDN

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

本地

<script src="vue.min.js"></script>

1.3.2 Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形

1.3.3 代码编写步骤

  • 定义html，引入vue.js
  • 定义app div，此区域作为vue的接管区域
  • 定义Vue实例，接管app区域。
  • 定义model（数据对象）
  • 在app中展示数据
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 1.引入vue.js -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
    <script src="./js/vue.min.js"></script>
  </head>
  <body>
    <!-- 2.创建 id为 app 的div -->
    <div id="app">
      {{name}} <br />
      {{school.name}} {{school.mobile}}<br />
      <ul>
        <li>{{names[0]}}</li>
        <li>{{names[1]}}</li>
        <li>{{names[2]}}</li>
      </ul>
    </div>
  </body>

  <script>
    //3.创建Vue实例
    var VM = new Vue({
      el: "#app",
      data: {
        name: "你好魔兽世界 我不好",
        //对象类型
        school: {
          name: "拉钩教育",
          mobile: "1001001",
        },
        //数组类型
        names: ["尼古拉斯", "赵四", "凯撒"],
      },
    });
  </script>
</html>

1.3.4 {{}}: 插值表达式

通常用来获取Vue实例中定义的数据(data)

属性节点中 不能够使用插值表达式

1.3.5 el: 挂载点

  • el的作用 ?定义 Vue实例挂载的元素节点,表示vue接管该区域
  • Vue的作用范围是什么 ?Vue会管理el选项命中的元素,及其内部元素
  • el选择挂载点时,是否可以使用其他选择器  ?可以,但是建议使用 ID选择器
  • 是否可以设置其他的DOM元素进行关联 ?可以但是建议选择DIV, 不能使用HTML和Body标签

1.3.6 data: 数据对象

  • Vue中用到的数据定义在data中
  • data中可以写复杂类型
  • 渲染复杂类型数据的时候,遵守js语法

1.4 声明式渲染的好处

Vue中的声明式渲染,简单理解就是我们声明数据,Vue帮我们将数据渲染到HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{name}}</h2>
    </div>
  </body>

  
  <!-- <script src="./js/jquery-1.8.3.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#app").append("<h2>Hello Word! !</h2>");
    });
  </script> -->

  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app", //挂载点
      data: {
        name: "Hello Word! !",
      },
    });
  </script>
</html>

1.5 Vue常用指令

根据官网的介绍，指令 是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

1.5.1 v-text 指令

作用: 获取data数据, 设置标签的内容.

注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 插值表达式 不会覆盖原来的内容体 -->
      <h2>{{message}}高薪训练营</h2>

      <!-- v-text 获取data数据,设置标签的内容, 会覆盖之前的内容体 -->
      <h2 v-text="message">高薪训练营</h2>

      <!-- 拼接字符串 -->
      <h2 v-text="message+1"></h2>
      <h2 v-text="message+'abc"></h2>
    </div>
  </body>
  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        message: "Java程序员",
      },
    });
  </script>
</html>

1.5.2 v-html 指令

作用: 设置元素的 innerHTML (可以向元素中写入新的标签)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
        v-html指令: 设置元素的innerHTML, 向元素中写入标签
       */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 获取普通文本 -->
      {{message}}
      <h2 v-text="message"></h2>
      <h2 v-html="message"></h2>

      <!-- 设置元素的innerHTML -->
      <h2 v-html="url"></h2>
      <h2 v-text="url"></h2>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        message: "Java程序员",
        url: "<a href='https://www.baidu.com'>百度一下</a>",
      },
    });
  </script>
</html>

1.5.3 v-on 指令

作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法"

绑定的方法定义在 VUE实例的, method属性中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
        v-on指令: 作用是为元素绑定事件

     */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 绑定点击事件 -->
      <input type="button" value="点击按钮" v-on:click="show" />

      <!-- 简写方式 -->
      <input type="button" value="点击按钮" @click="show" />

      <!-- 绑定双击事件 -->
      <input type="button" value="双击按钮" @dblclick="show" />

      <!-- 绑定点击事件,修改内容 -->
      <h2 @click="changeFood">{{food}}</h2>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        food: "麻辣小龙虾",
      },
      //通过methods 专门存放Vue的方法
      methods: {
        show: function () {
          alert("程序员在加班!!");
        },
        changeFood: function () {
          console.log(this.food);
          //使用this获取data中的数据
          //在vue中 不需要考虑如何更改DOM,重点放在修改数据上,数据更新后 使用数据的那个元素也会同步更新
          this.food += "真好吃";
        },
      },
    });
  </script>
</html>

1.5.4 v-show指令

作用: v-show指令, 根据真假值,切换元素的显示状态

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*
      v-show: 根据真假值.切换元素的显示状态
        原理就是修改display 实现显示和隐藏
        值为true 显示,false隐藏
        数据改变后,显示的状态会同步更新
    */
    </style>
  </head>
  <body>
    <div id="app">
      <input type="button" value="切换状态" @click="changeShow" />
      <img v-show="isShow" src="./img/car.gif" />
      <img v-show="age > 18" src="./img/car.gif" />
    </div>
  </body>

  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        isShow: true,
        age: 19,
      },
      methods: {
        changeShow: function () {
          //触发方法, 对isShow进行取反
          this.isShow = !this.isShow;
        },
      },
    });
  </script>
</html>

v-show指令总结

  • 原理是修改元素的display,实现显示或者隐藏
  • 指令后面的内容,最终会解析为 布尔值
  • 值为true 显示, 为false 则隐藏
  • 数据改变之后,显示的状态会同步更新

1.5.5 v-if 指令

作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*
      v-if指令: 根据表达式的真假,切换元素的显示和隐藏 (操作是dom)
        频繁切换就使用 v-show,反之 v-if
        本质上是通过操作dom元素来切换状态
    */
    </style>
  </head>
  <body>
    <div id="app">
      <input type="button" value="切换状态" @click="changeShow" />
      <img v-if="isShow" src="img/car.gif" />
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        isShow: false,
      },
      methods: {
        changeShow: function () {
          this.isShow = !this.isShow;
        },
      },
    });
  </script>
</html>

v-if 指令总结

  • v-if 指令的作用: 根据表达式的真假切换元素的显示状态
  • 本质是通过操作dom元素,来切换显示状态
  • 表达式为true 元素存在与dom树,为false从dom树中移除
  • 频繁切换使用 v-show ,反之使用v-if

1.5.6 v-bind 指令

作用: 设置元素的属性 （比如:src,title,class）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*
      v-bind : 设置元素的属性 src class
      语法: v-bind:属性名=表达式

      作用: 为元素绑定属性
      完整写法: v-bind:属性名 = 表达式 ,简写 :属性=表达式
    */
    </style>
  </head>
  <body>
    <div id="app">
      <img src="img/lagou.jpg" alt="" />

      <!-- 使用 v-bind 设置src属性 -->
      <img v-bind:src="imgSrc" />

      <!-- v-bind 可以简写为 : -->
      <img v-bind:src="imgSrc" :title="imgTitle" />

      <!-- 设置class -->
      <div :style="{ fontSize: size+'px' }">v-bind指令</div>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        imgSrc: "img/lagou.jpg",
        imgTitle: "拉钩教育",
        size: 50,
      },
    });
  </script>
</html>

v-bind指令总结

  • v-bind 指令的作用是： 为元素绑定属性
  • 完整写法 v-bind:属性名，可以简写为 :属性名

1.5.7 v-for 指令

作用: 根据数据生成列表结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*
      v-for指令:根据数据生成列表结构
        1.数组经常和v-for结合使用
        2.语法格式: (item,index) in 数据
        3.数组的长度变化,会同步更新到页面上, 响应式的
    */
    </style>
  </head>
  <body>
    <div id="app">
      <input type="button" value="添加数据" @click="add" />
      <input type="button" value="移除数据" @click="remove" />

      <ul>
        <!-- 在li标签中 获取数组的元素 -->
        <li v-for="(item,index) in arr">
          {{index+1}}城市: {{item}}
        </li>
      </ul>

      <!-- 使用h2标签显示
      
      -->
      <h2 v-for="p in persons">
        {{p.name}}
      </h2>
    </div>
  </body>

  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        //数组
        arr: ["上海", "北京", "广东", "深圳"],

        //对象数组
        persons: [
          { name: "尼古拉斯·赵四" },
          { name: "莱昂纳多·小沈阳" },
          { name: "多利安·刘能" },
        ],
      },
      methods: {
        add: function () {
          //向数组添加元素 push
          this.persons.push({ name: "小斌" });
        },
        remove: function () {
          //移除数据
          this.persons.shift();
        },
      },
    });
  </script>
</html>

v-for指令总结

  • v-for 指令的作用: 根据数据生成列表结构
  • 数组经常和 v-for结合使用,数组有两个常用方法: push() 向数组末尾添加一个或多个元素；shift() 把数组中的第一个元素删除
  • 语法是: (item,index) in 数据
  • item和index 可以结合其他指令一起使用
  • 数组的长度变化,会同步更新到页面上,是响应式的

1.5.8 v-on 指令补充

  • 传递自定义参数 : 函数调用传参
  • 事件修饰符: 对事件触发的方式进行限制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*
        1.函数调用传参
          事件绑定方法后,可以传递参数
          定义方法时,需要定义形参,来接收参数
          
        2.事件修饰符
          可以对事件进行限制, .修饰符
          .enter 可以限制触发的方式为 回车
    */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 函数传参 -->
      <input
        type="button"
        value="礼物刷起来"
        @click="showTime(666,'爱你老铁!')"
      />

      <!-- 事件修饰符 指定哪些方式可以触发事件 -->
      <input type="text" @keyup.enter="hi" />
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {},
      methods: {
        showTime: function (p1, p2) {
          console.log(p1);
          console.log(p2);
        },
        hi: function () {
          alert("你好吗?");
        },
      },
    });
  </script>
</html>

总结：

  • 事件绑定方法,可以传入自定义参数
  • 定义方法时,需要定义形参,来接收实际的参数
  • 事件的后面跟上 .修饰符 可以对事件进行限制
  • .enter 可以限制触发的按键为回车
  • 事件修饰符有许多 使用时可以查询文档

1.5.9 MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式. 
MVVM模式将页面,分层了 M 、V、和VM ,解释为：
      Model: 负责数据存储；
      View: 负责页面展示；
      View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*
        MVVM: 前端的架构模式
        M:Model 负责存储数据
        V:View  负责页面展示
        VM:ViewModel 负责业务处理(MVVM模式的核心)
    */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- View 视图部分 -->
      <h2>{{name}}</h2>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>

    //创建的vue实例,就是 VM ViewModel
    var VM = new Vue({
      el: "#app",
      //data就是MVVM模式中的 model
      data: {
        name: "hello",
      },
    });
  </script>
</html>

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

  • 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
  • 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
  • MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定

1.5.10 v-mode 指令

作用: 获取和设置表单元素的值(实现双向数据绑定)
  双向数据绑定
          单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
          双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

什么情况下用户可以更新View呢？
填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
        v-model: 实现双向数据绑定
        单向数据绑定: 将model绑定到view上,当model发生变化时,view会随之变化
        双向数据绑定: view视图发生变化时,model也会随之改变
       */
    </style>
  </head>
  <body>
    <div id="app">
      <input type="button" value="修改message" @click="update" />

      <!-- View 视图 -->
      <!-- <input type="text" v-bind:value="message" /> -->

      <!-- v-model 实现双向数据绑定 -->
      <input type="text" v-model="message" />
      <input type="text" v-model="password" />
      <h2>{{message}}</h2>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    //VM 业务逻辑控制
    var VM = new Vue({
      el: "#app",
      //Model 数据存储
      data: {
        message: "拉钩教育训练营",
        password: 123,
      },
      methods: {
        update: function () {
          this.message = "拉钩";
        },
      },
    });
  </script>
</html>

v-model指令总结

  • v-model 指令的作用是便捷的设置和获取表单元素的值
  • 绑定的数据会和表单元素值相关联
  • 双向数据绑定

节选自拉钩教育JAVA系列培训

 

 

 

 

 

 

enterpc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue快基础知识快速入门
weixin_48514459的博客
03-07 206
Vue.js快速入门 掌握HTML,CSS,JavaScript，ajax 开发工具：vscode 1、Vue基础 1.1Vue简介： JavaScript框架 简化DOM操作 响应式数据驱动（数据与页面同步更新） https://cn.vuejs.org/ 1.2第一个Vue程序 开发步骤： 导入开发版本的Vue.js 创建Vue实例对象，设置el属性和data属性 使用简洁的模板把数据渲染到页面上 <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src
Vue快速入门
我真的很不错的博客
10-02 636
文章目录1.概述2.快速入门2.1.安装vue2.1.1.下载安装2.1.2.使用CDN2.1.3.npm安装2.2.vue入门案例2.2.1.vue声明式渲染2.2.2.双向绑定2.2.3.事件处理2.3.生命周期钩子2.3.1生命周期2.3.2.钩子函数3.指令3.1.插值表达式3.1.1.花括号3.1.2.v-text和v-html3.2.v-model 1.概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上
手把手带你在实践中快速入门Vue【详细解说】
热门推荐
Pythonicc的博客
05-20 8万+
这里写自定义目录标题vue的作者Vue.js的概述功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 vue的作者 尤雨溪是Vue.js框架的作者，他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时
Vue—new Vue() el:#app 的作用
qq_34246965的博客
08-20 6280
1.new Vue()创建一个新的 Vue 实例 2.el挂在原色 el绑定的元素内，都是Vue的作用范围 3.data数据对象 当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &l
vue的el:“#app“
weixin_44671184的博客
03-22 2898
const app = new Vue({ el: '#app', // render: h => h(App), router }) // .$mount('#app') el: '#app', .$mount('#app') 两种写法都可以
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
VUE入门
06-20
在“VUE入门”这门课程中，你将深入学习Vue的核心概念和技术，以便将它有效地应用到实际项目中。 首先，我们要理解Vue的**双向数据绑定**。这是Vue的一大亮点，它使得视图与模型之间的数据自动同步。Vue通过`v-...
vue入门
脚踏实地
10-14 318
一、vue的特点 1、模板渲染 2、模块化 3、扩展功能 路由、ajax、数据流 二、内容 vue实例 模板渲染 条件渲染 组件交互 标签属性 事件绑定 计算属性 属性监听 表单 动画 vue-cli项目搭建 vue-router vuex vue组件 vue指令 内置组件 实例方法 实例选项 实例属性 三、入门 1、 项目搭建 > 创建...
Vue基础(一)
进击的程序猿
06-20 3296
Vue学习 框架和类库 前端从后端获取到数据之后，如何将其展示到页面上？ 原生DOM操作，将数据一个个的往上放 字符串拼接法 模板引擎 数据驱动的MVVM框架 Vue等这些框架做的事情，其实就是简化数据渲染的操作！提高开发效率的！！ 框架(Framework) 框架是一整套完整的解决方案，我们需要将自己的代码按照框架的规则，放在合适的位置，框架会在合适的时机，帮我们调用代码...
vue1：模板语法
menglong0329的博客
05-21 159
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值： <div id="app"> <p>{{ mess
初识vue
柔光
05-14 267
官网：https://cn.vuejs.org/ 属性 ---- 变量 ---- 模型 方法 ---- 函数 1.介绍 1.渐进式 JavaScript 框架：主张最少。 2.优点：易用 灵活 高效 指令系统 SPA(单页面应用) MVVM 多页面应用：1个url 对应一个html页面，多个url对应多个html 单页面应用：多个url对应1个html页面 3.兼容：Vue不支持IE8 及...
Vue 组件(一)
qq_60078280的博客
08-19 171
一、概念 首先我们先看一个Vue组件的实例 <div id="app"> <counter></counter> </div> <script> // 定义一个名为 counter 的新组件 Vue.component('counter', { data: function () { return { count: 0 } }, template: '<button @c...
Vue学习
young_man2的博客
08-14 905
vue学习
Vue基础
weixin_59059466的博客
03-02 662
介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 安装 直接用 <script> 引入 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 下载 开发版本 包含完整的警告和
VUE3笔记
书生的博客
10-25 696
vite是一个web开发构建工具，由于其原生的ES模块导入方式，可以实现快速的冷服务器启动。通过终端中运行以下命令，可以使用vite快速构建vue项目。
vue-组件详解
qq_42450726的博客
10-09 375
VUE-组件组件的定义组件的定义组件组件挂载全局挂载局部挂载组件使用注意 组件的定义 使开发者根据自己的需求,扩展 HTML 元素，封装可重用的代码。 有利于修改代码,提高了代码的易用性 组件的 定义组件 组件也是Vue实例,因此就有了data、method、computed、watch等属性。 组件的命名通常是大驼峰（CaBa）或者是下划线(ca-ba)的命名方式。 teplate属性是组件中至关重要的一环,它表示组件是以何种元素组成 例如: const CommonHead={ templ
vue入门到精通 pdf
最新发布
11-23
《Vue入门到精通》是一本关于Vue.js前端框架的学习指南。本书分为入门、进阶和精通三个部分，帮助读者从零基础开始学习，并逐步掌握Vue.js的核心概念和应用技巧。 在入门部分，书中首先介绍了Vue.js的基本概念，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值