vue的基本语法

最新推荐文章于 2022-07-08 16:58:54 发布
最新推荐文章于 2022-07-08 16:58:54 发布
阅读量109 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjgllllll/article/details/117569036
版权

基本语法
1、基本数据渲染和指令
创建 01-基本数据渲染和指令.html
你看到的 v-bind 特性被称为指令。指令带有前缀 v除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initialscale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>

<body>
 <div id="app">
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
 此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
    {{content}}
   </h1>
   <!-- v-bind 指令的简写形式： 冒号（:） -->
   <h1 :title="message">
    {{content}}
   </h1>
 </div>
 <script src="vue.min.js"></script>
 <script>
 new Vue({
 el: '#app',
 data: {
 content: '我是标题',
 message: '页面加载于 ' + new Date().toLocaleString()
}
 })
 </script>
</body>

</html>

在这里插入图片描述

2、双向数据绑定
创建 02-双向数据绑定.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initialscale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>

<body>
 <div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{{searchMap.keyWord}}</p>
 </div>
 <script src="vue.min.js"></script>
 <script>
 new Vue({
 el: '#app',
 data: {
    searchMap:{
        keyWord: '1111'
    }
 }
 })
 </script>
</body>

</html>

在这里插入图片描述

3、事件
创建 03-事件.html
需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息
在前面的例子基础上，data节点中增加 result，增加 methods节点 并定义 search方法

<!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>
</head>

<body>
    <div id="app">
        <!--vue绑定事件-->
        <button v-on:click="search()">查询</button>

        <!--vue绑定事件简写-->
        <button @click="f1()">查询1</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '111'
                },
                //查询结果
                result: {}
            },
            methods:{//定义多个方法
                search() {
                    console.log('search....')
                },
                f1() {
                    console.log('f1...')
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

4、修饰符
创建 04-修饰符.html
修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为

<!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>
</head>

<body>
    <div id="app">
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.username"/>
            <button type="submit">保存</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit() {
                    if (this.user.username) {
                        console.log('提交表单')
                    } else {
                        alert('请输入用户名')
                    }
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

5、条件渲染
创建 05-条件渲染.html
v-if：条件指令

<!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>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="ok"/>是否同意
        <!--条件指令 v-if  v-else -->
        <h1 v-if="ok">111</h1>
        <h1 v-else>22323</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

6、列表渲染
创建 06-列表渲染.html
v-for：列表循环指令

<!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>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="n in 10"> {{n}} </li>
        </ul>
        <ol>
            <li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
        </ol>

        <hr/>
        <table border="1">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                        { id: 1, username: 'helen', age: 18 },
                        { id: 2, username: 'peter', age: 28 },
                        { id: 3, username: 'andy', age: 38 }
                    ]
            }
        })
    </script>
</body>

</html>

在这里插入图片描述
10、局部组件
创建 01-1-局部组件.html
定义组件

<!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>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //定义vue使用的组件
            components: {
                //组件的名字
                'Navbar': {
                    //组件的内容
                    template: '<ul><li>首页</li><li>学员管理</li></ul>'
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述
11、全局组件
创建 01-2-全局组件.html

<!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>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/Navbar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

定义全局组件：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

在这里插入图片描述

13、路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库

<!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>
</head>

<body>
    <div id="app">
            <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                <router-link to="/teacher">讲师管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
    </div>

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

    <script>
            // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })
    </script>
</body>

</html>

在这里插入图片描述

zhongbai-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础之查询
阿彭啊的博客
06-17 953
Vue循环查询 要用到Vue的一个循环循环指令 v-for循环指令  v-for=”item in data”                   ID         姓名         学号         班级                  {{item.Id}}         {{item.UserName}}         {{ite
vue标签
qq_53725689的博客
01-15 886
vue
Vue项目url中的＜%= BASE_URL %＞
空城三梦
11-29 3202
vue-cli 创建的一个项目中执行命令vue inspect > output.js将 vue-cli 中webpack 的配置信息导出到 output.js 文件，会有一段代码： new DefinePlugin( { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ), 在 webpack 中全局声明了 BASE_...
Vue---基本使用
一夜奈何梁山
08-30 481
1：基本使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 1:导入vue的包 --> <script src="js/vue.js"></script&g
Vue
阳神
08-24 516
Vue.js 课程介绍 什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发
vue基本语法讲解.pdf
05-11
Vue 基本语法讲解 一、 Vue 项目重点概念介绍 1. 单页面应用程序：单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序将所有的功能局限在...
vue基本语法综合案例
08-09
vue基本语法综合案例
180315_VueTest:Vue基本语法测试
04-29
1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue...
vue基础语法练习源码
12-09
通过实际操作和练习，你可以快速掌握Vue的基本语法，并逐步提升到更高级的开发技巧。 总之，Vue.js的这些基础知识对于任何想要进入前端开发领域的学习者来说都是至关重要的。过滤器、插件和列表渲染只是Vue众多功能...
vue2.0基本语法思维脑图1，一起来学vue
01-14
vue2.0基本语法思维脑图1，一起来学vue
Vue中的指令
行无所至，学无所尽。
11-18 135
v-text/v-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>
vue的使用
dimandsun的博客
09-23 180
目录数据绑定事件监听条件判断：v-if与v-showfor循环遍历对象遍历集合 参考官方教程：https://cn.vuejs.org/v2/guide/ 数据绑定 {{ message }} v-bind:title="message" 缩写: :title="message" v-model="message" 事件监听 v-on:click="方法名" 缩写：@click="方法名" 条件判断：v-if与v-show 基本：v-if="布尔表达式" if：<h1 v-if="aweso
Vue的简单使用
weixin_46427348的博客
07-08 932
1.导入开发版本Vue.js 2.使用简洁的模板语法把数据渲染到页面上 {{ }}的作用是和下面的数据联系起来 3.创建Vue实例对象，设置el属性和data属性 el：挂载点 el的作用范围 ： 在其外部的时候无效 在其内部的时候有效 el：“#app” id 选择器 el: “.app” 类选择器 el “div” 标签选择器复杂数据的渲染 对象类型数据的渲染 数组类型数据的渲染 v-text ：设置标签的文本值 其中第一种写法会把整个标签中的值替换为message中的值
vue模板语法
weixin_45092983的博客
08-01 144
今天我们讲的关于vue的模板语法 案例 1.插值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>...
vue + 模板
jz1993的博客
07-10 568
&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt; &lt;%@taglib prefix="t" tagdir="/WEB-INF/tags/" %&gt; &lt;% String path = request.getContextPath(); String webName
Vue基础(完整版)
qq_35249342的博客
01-24 2854
1.5 一些链接 Vue官方文档 Vue开源项目汇总 Vue.js中文社区 2. Vue起步 2.1 安装Vue 直接下载源码然后通过路径引入 开发版本：https://vuejs.org/js/vue.js 生产版本：https://vuejs.org/js/vue.min.js CDN &lt;script src="https://cdn.jsdelivr.net/npm/...
一篇文章，Vue快速入门
热门推荐
cV展示的学习园
06-24 5万+
① Vue概述及第一个Vue程序(Hello World) 1.1 什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的
Vue-----一，vue基础语法
qq_43336475的博客
05-10 227
一，挂载点 el:"#XXX"相当于绑定这个element 模板：挂载点内部的内容都叫做模板 template:"" 实例：vue根据挂载点el，template,data自动生成内容 插值表达式：｛｛msg｝｝用data中的msg插入html中生成内容 或者用v-html="msg"显示content内的内容 或者v-text="msg"显示转译一遍后content中的内容 二，绑定事件 **v...
vue实现查询功能
weixin_53068161的博客
05-08 1万+
vue个人博客-解决对本地数据查询时出现删除编辑出错的问题博客展示主要代码实现查询时博客展示内容刷新出现问题解决方法 博客展示主要代码 博客展示： <div class="showBlog"> <h1>Blog post</h1> <!-- 搜索框 --> <input type="text" v-model="search" placeholder="搜索blog标题" v-if="flag" class="search"
vue基本语法思维导图
最新发布
08-26
请注意，以上只是Vue基本语法的思维导图，具体的语法细节和用法请参考官方文档或相关教程。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [vue（框架 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值