在IDEA 中使用 VUE + VUE 常用语法 + 入门案例实现

最新推荐文章于 2024-05-13 22:19:19 发布

Yan Yang

最新推荐文章于 2024-05-13 22:19:19 发布

阅读量3.3k

点赞数

分类专栏： SpringBoot VUE

本文链接：https://blog.csdn.net/zzvar/article/details/118398691

版权

VUE 入门

VUE 入门
总结

VUE 入门

一、vue 概念

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

二、在 IDEA 中创建 VUE 项目

1. 第一种创建方式——创建静态 WEB 项目

1.1 新建一个 Static Web 项目

在这里插入图片描述

1.2 填写项目名

在这里插入图片描述

2. 第二种创建方式——创建空项目

2.1 新建一个 Empty Project 项目

在这里插入图片描述

2.2 填写项目名

在这里插入图片描述

三、VUE常用指令

1. VUE 入门案例

胡子语法：{ {}} ，{ {}} 可以是：【1】表达式；【2】字符串；【3】函数；【4】正则表达式；【5】boolean；【6】…；
new Vue()：创建 Vue 实例，然后构造函数接收一个对象，对象中有一些属性；
el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div；
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中；
message：这里我们指定了 data 中的一个 message 属性；
{ {}}：通过 { {}} 的方式取出属性值。

注意：{ {属性}} 该只能在 html 标签的内容（开始标签与结束标签之间）上使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <!-- vue 定制模板 -->
    <div id="app">
        <!-- 模板要填充的数据，属性取值 -->
        {
  { message }}
    </div>

    <script>
            var app = new Vue({
    
                // vue 实例对象
                el: '#app',     // 指定模板
                data: {
    
                    message: 'Hello Vue!'       // 填充模板所需要的数据
                }
            });
    </script>
</body>
</html>

2. v-text

用于更新标签包含的文本，它的作用跟双大括号效果是一样的。

2.1 语法

<p v-text="name"></p>

2.2 例子

<p v-text="name"></p>
<p> {
  {name}} </p>

3. v-bind

属性绑定指令，给 html 标签的属性绑定数据，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。

3.1 语法

<div v-bind:id="emp.id"></div>
<div :value="emp.name"></div>

3.2 例子

<div id="app">
    <!-- {
   {属性}} 该只能在 html 标签的内容（开始标签与结束标签之间）上使用 -->
    <!-- v-bind：属性绑定指令，给 html 标签的属性绑定数据 -->
    <span v-bind:title="title"> {
  {msg}} </span>
    <br/>
    <!-- 简写方式 -->
    <span :title="title"> {
  {msg}} </span>
    <a v-bind:href="href">百度</a>
    <img :src="src" width="690" height="370">
</div>
<script>
    let vue = new Vue({
    
        el: "#app",
        data: {
    
            title: "瞅你咋地",
            msg: "你瞅啥~",
            href: "http://www.baidu.com",
            src: "http://img.mp.sohu.com/upload/20170510/62d64c61ccc74f1d840467d483d87566_th.png"
        },
    });
</script>

4. v-model

用于表单输入，实现表单控件和数据的双向绑定。只要给 input 控件添加 v-model 指令，并指定关联的数据 msg，就可以轻松把用户输入的内容绑定在 msg 上。

4.1 语法

<inpurt type="text" v-model="msg"/>

4.2 例子

<div id="app">
	<!-- 单向绑定属性 -->
    v-bind:<input name

最低0.47元/天解锁文章

Yan Yang

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
5
评论
在IDEA 中使用 VUE + VUE 常用语法 + 入门案例实现

VUE 入门VUE 入门一、vue 概念二、在 IDEA 中创建 VUE 项目1. 第一种创建方式——创建静态 WEB 项目1.1 新建一个 Static Web 项目1.2 填写项目名2. 第二种创建方式——创建空项目2.1 新建一个 Empty Project 项目2.2 填写项目名三、VUE常用指令1. VUE 入门案例2. v-text2.1 语法2.2 例子3. v-bind3.1 语法3.2 例子4. v-model4.1 语法4.2 例子5. v-html5.1 语法5.2 例子6. v-if
复制链接

扫一扫