【vue基础语法详细介绍】

这篇具有很好参考价值的文章主要介绍了【vue基础语法详细介绍】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 基础语法

Vue.js使用声明式渲染、组件化、指令等一系列概念来构建前端应用,以下是一些Vue.js的基本语法和概念:

1.1 声明式渲染

Vue.js 使用了基于HTML的模板语法,允许你声明式地将 DOM 绑定到底层 Vue 实例的数据上。

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

当 Vue 实例被创建时,它将挂载点内的DOM与数据绑定通过一些指令与特殊的属性连接起来。

1.2 条件与循环

v-if 进行条件渲染,用 v-for 进行列表渲染。

<div id="app">
  <p v-if="seen">Now you see me</p>
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
var app = new Vue({
  el: '#app',
  data: {
    seen: true,
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

如果 seen 的值为 false,那么 <p> 标签不会被渲染,列表中的内容会根据 todos 数组动态生成。

1.3 事件处理

可以用 v-on 指令监听 DOM 事件,并在触发时执行一些 JavaScript 代码。

<div id="app">
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

点击按钮后,reverseMessage 方法将被调用,数据 message 的内容将被反转。

1.4 双向数据绑定

Vue.js 提供了一个指令 v-model 实现表单输入和应用状态之间的双向绑定。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

用户输入的每一个字符都会立即更新到 message 并反映到 <p> 标签里。

1.5 组件化

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>This is a todo item</li>'
})

现在你可以在一个父级组件模板中以自定义元素 <todo-item> 的形式使用它了。

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

Vue 的组件结构允许我们以不同的方式组合组件来构建强大的应用。

以上是Vue的基本概念和常用语法的介绍,Vue的设计思想很大程度上是让开发者能够专注于应用的数据逻辑,而不需要直接操作DOM,从而简化了前端开发的复杂度。

2. 模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据,所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析,vue将模板编译成虚拟dom,结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。

  • html模板语法:
    这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。

2.1 插值

2.1.1 文本

使用 {{msg}}的形式,标签将会被替换成为数据对象(data)上msg属性值,当绑定的数据对象上的msg属性值发生变化时,插值处的值也会发生变化(双向绑定)

2.1.2 html

{{}}的方式将数据处理为普通文本,如果要输出html,需要使用v-html指令
示例:
在data中定义一个html属性,其值为html

data: {
    html:  '<input type="text" value="hello"/>'
}

在html中取值

<span v-html="html"></span>

2.1.3 属性

HTML属性中的值应使用v-bind指令,类型与jQuery中的$("#xxx").attr(propName, propVal)
示例,以修改元素的class属性为例:
定义一个样式

<style>
.redClass {
    font-size: 30px;
    color: red;
}
</style>

在data中定义一个属性,其值为上面定义的样式名

data: {
    red: 'redClass'
}

在html使用v-bind指令设置样式

<p>设置之前:  aaaa</p>
<p>设置之后: <span v-bind:class="red">aaa</span></p>

在浏览器中可以看到相应的效果

2.1.4 表达式

几种常见的表达式:

{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }} 三元运算符
<li v-bind:>我的Id是js动态生成的</li>

示例1:
在html中加入元素,定义表达式

<span>{{str.substr(0,6).toUpperCase()}}</span>

在data中加入一个属性,名为str与html中对应

data: {
    str: 'hello vue'
}

查看效果:字符串被截取,并转换为大写

示例2:

<span>{{ number + 1 }}</span>

在data中加入一个属性,名为str与html中对应

data: {
    number: 10
}

在data中定义的number值将会被加1

示例3:
这是一个三元运算,如果ok为true,表达式值为YES ,如果ok为false则表达式值为NO

<span>{{ ok ? 'YES' : 'NO' }}</span>

在data中加入一个属性,名为str与html中对应

data: {
    ok: true
}

示例4:
演示id属性绑定和动态赋值

<p>
    <input type="text" v-bind:id="bookId"/></br>
    <!--动态生成Id-->
    <input type="text" v-bind:id="'bookList_' + id"/>
</p>
data: {
    bookId: 'book001',
    id: 'book002'
}

该示例可以通过开发者工具查看生成的id属性值。

2.2 指令

指令指的是带有“v-"前缀的特殊属性

2.2.1 核心指令

2.2.1.1 v-if |v-else-if|v-else

根据其后表达式的bool值进行判断是否渲染该元素, 指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)

示例:
HTML

<div v-if="type === 'A'">
    type == A
</div>
<div v-else-if="type === 'B'">
    type == B
</div>
<div v-else>
    other value
</div>

JS

var vm = new Vue({

       el: '#app',

       data: {
           type: 'C'
       }
   });

可以修改data中的type值观察页面的输出。

注: js = == === 之间的区别
一个等号是赋值操作,==先转换类型再比较,===先判断类型,如果不是同一类型直接为false
alert(1 == “1”); // true
alert(1 === “1”); // false
2.2.1.2 v-show

与v-if类似,只是不会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none"
v-show 表达式true则显示,否则不显示。
注意:使用v-show,虽然不显示,但在页面的dom中是存在的,只是display属性为none
示例: 在HTML中加入如下内容

<div v-show="show === 'yes'">
    show == yes
</div>

在data中定义show属性

var vm = new Vue({
    el: '#app',
    data: {
        show: 'yes' 
    }
});

修改show值,观察页面显示

2.2.1.3 v-for

循环遍历

遍历数组: v-for="item in items", items是数组,item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值, key属性名,index下标

示例:
定义一个div,使用v-for指令输出,items是vue实例中data中定义的对象数组

<!--数组-->
<div v-for="item in items">
     {{item.name}} -- {{item.id}}
</div>

<!--循环生成下拉列表-->
<div>
    <select >
        <option v-for="item in items" 
            v-bind:value="item.id">{{item.name}}</option>
    </select>
</div>

<!--对象-->
<div v-for="(o,key) in obj">
    {{key}}-{{o}}
</div>
var vm = new Vue({

    el: '#app',

    data: {
        itmes:[
            {name: 'zs',age:18},
            {name: 'ww',age:19},
            {name: 'ls',age:20},
            {name: 'zl',age:21}
        ],
        obj: {
            name:'张三',
            age: 21,
            addr: 'xxxx'
        }
    }
});
2.2.1.4 v-on|v-model|v-for

创建一组多选框,可以获取到用户选择项

<!--
循环生成一组多选按钮,v-model通过vue的双向绑定将用户选择的项保存到
定义的selected组数中
-->
<div v-for="(item,index) in items">
    {{index}}:<input type="checkbox" v-bind:value="item.id"
            v-model="selected">{{item.name}}
</div>
<button v-on:click="getSelected()">获取选择</button>
var vm = new Vue({

    el: '#app',

    data: {
        type: 'C',
        show: 'no',
        items:[
            {name: '天津',id:18},
            {name: '昆明',id:19},
            {name: '武汉',id:20},
            {name: '南京',id:21}
        ],
        obj: {
            name:'张三',
            age: 21,
            addr: 'xxxx'
        },
        selected:[]
    },
    methods: {
        getSelected: function() {
            console.log(this.selected);
        }
    }
});
2.2.1.5 参数 v-bind:href,v-on:click

示例:

<!--参数:href-->
<div>
    <a v-bind:href="url">baidu</a>
</div>

<!--
参数:动态参数.
attname需要在data中定义,
注意:attname要全部小写!!
-->
<div>
    <a v-bind:[attrname]="url">baidu</a>
    <button v-on:[evname]="clickme">点我看看</button>
</div>

注意:在动态参数中,作为参数的变量名(如:attrname)要全部小写,否则无效 !!

var vm = new Vue({

    el: '#app',

    data: {

        url: 'https://www.baidu.com',
        attrname:'href',
        evname: 'click'
    },

    methods: {
        clickme: function() {
            console.log("点到我了");
        }
    }

});
2.2.1.6 简写

Vue为v-bindv-on这两个最常用的指令,提供了特定简写文章来源地址https://www.toymoban.com/news/detail-789118.html

指令 简写 示例
v-bind:xxx :xxx v-bind:href 简写为 :href
v-on:xxx @xxx v-on:click 简写为 @click

到了这里,关于【vue基础语法详细介绍】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端 js 操作 Cookie 详细介绍与案例

    1.1 详细介绍 名称和值:Cookie由一个名称和对应的值组成。名称是一个字符串,用于标识Cookie,而值则是与名称相关联的数据。 域名:每个Cookie都与特定的域名相关联。Cookie只会被发送到与其关联的域名下的请求中。 路径:Cookie可以与特定的路径相关联。当浏览器向指定路径

    2024年02月09日
    浏览(52)
  • Docker基础(镜像的结构,Dockerfile语法介绍,基于Ubuntu镜像来构建一个Java应用)

    要想自己构建镜像,必须先了解镜像的结构。 镜像之所以能让我们快速跨操作系统部署应用而忽略其运行环境、配置,就是因为镜像中包含了程序运行需要的系统函数库、环境、配置、依赖。 因此,自定义镜像本质就是依次准备好程序运行的基础环境、依赖、应用本身、运

    2024年02月20日
    浏览(46)
  • 基于vue.js前端+java后台购物商城系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年04月14日
    浏览(46)
  • 【Vue前端】vue使用笔记0基础到高手第2篇:Vue进阶知识点介绍(附代码,已分享)

    本系列文章md笔记(已分享)主要讨论vue相关知识。Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。Vue.js是一个构建

    2024年02月19日
    浏览(41)
  • Flutter基础语法(六)var、final、const、late

    第六章 Fluttervar、final、const、late的区别与使用 在使用flutter开发已经有一段时间了,在之前都是快速开发,没有时间去复盘自己的知识体系,现在就从flutter的基本语法开始,一步步分析flutter涉及到的细节问题,希望对你有所帮助。 var就是定义变量的意思。 var定义的变

    2024年02月10日
    浏览(35)
  • flutter基础入门教程(Dart语法+UI布局+页面路由+后端连接)

    1、环境安装 1基础安装步骤教程 Android Studio安装与配置 https://juejin.cn/post/6844904054569582605 安装Android Studio前,需要先选择安装Java环境,Java需要到Oracle官网上下载安装,需要注册一个Oracle账号。 https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html Windows 10 配置Java 环境变量

    2024年02月03日
    浏览(33)
  • 【Java基础】BIO/NIO/AIO的详细介绍与比较区分

    BIO 全称 Blocking I/O,它是 JDK 1.4 之前的传统IO模型,是一种同步阻塞的IO,线程发起 IO 后,一直阻塞,直到缓冲区数据就绪后,在进入下一步操作 BIO存在的问题: 无法应对高并发的场景 连接建立后,当前线程没有数据可读就会阻塞,造成资源浪费 BIO适用场景: 客户端连接数

    2024年01月20日
    浏览(39)
  • JavaScript基础——1.js基础语法

    js全称JavaScript,是一种轻量级的面向对象的 编程语言 ,既能用在浏览器中控制页面交互,也能用在服务器端作为网站后台(借助 Node.js),因此 JavaScript 是一种全栈式的编程语言。 JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页,其中: HTML 用来定义网页的内容,例如标

    2024年04月28日
    浏览(36)
  • Vue | Vue.js 高级语法系列

    🖥️ Vue.js专栏:Vue.js 高级语法系列 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、Vue中自定义指令 认识自定义指令 指令的生命周期

    2024年01月21日
    浏览(36)
  • Next.js基础语法

    _app.tsx是项目的入口组件,主要作用: 可以扩展自定义的布局(Layout) 引入全局的样式文件 引入Redux状态管理 引入主题组件等等 全局监听客户端路由的切换 Next.js默认是没有配置路径别名的,我们可以在ts.config.json中配置模块导入的别名: baseUrl :配置允许直接从项目的根目

    2024年02月10日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包