Vue基础语法

一.Vue中template模板

二.vue中Mustache语法

vue中mustache语法就是插值表达式,其中插值表达式支持的操作:
1.部分模板中标签元素内容替换
2.不仅支持变量,而且支持简单的表达式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模板</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{ msg }}</h1>
            <h2>{{firstName + lastName }}</h2>
            <h2>{{number * 2 }}</h2>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "hello",
                    firstName:"m",
                    lastName: "yt",
                    number:100

                },
                methods:{

                }
            })
        </script>
    </body>
</html>

三.vue中v-once指令

v-once用法如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模板</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{ msg }}</h1>
            <h1 v-once>{{ msg }}</h1>
            
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "hello",
                    firstName:"mao",
                    lastName: "yaomin",
                    number:100

                },
                methods:{

                }
            })
        </script>
    </body>
</html>

该指令表示视图中元素或组件只会渲染一次,后续数据修改,但是绑定了v-once的标签元素内容不会修改

四. vue中v-text,v-html指令

v-text,将表达式的值当作文本渲染,v-html将表达式的值当作html内容渲染

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模板</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-text="msg">aaa</h1>
            <h1 v-html="url">ccc</h1>
            
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg:"你好呀,韩梅梅",
                    url:"<a href='https://www.baidu.com'>百度链接</a>"
                },
                methods:{

                }
            })
        </script>
    </body>
</html>

注意:v-text和v-html都会将标签元素的元素内容会全部替换

五.vue中v-pre,v-cloak指令

vue中v-pre指令的作用是:原封不动显示标签元素的内容,不会进行解析渲染
vue中v-cloak指令的作用是,用来处理插值表达式等渲染闪屏,解决网速过慢渲染时,因为vue在解析玩标签元素后会自动删除元素中的v-cloak属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模板</title>
        <script src="vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <h1>{{ msg }}</h1>
            
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg:"你好呀,韩梅梅",
                    url:"<a href='https://www.baidu.com'>百度链接</a>"
                },
                methods:{

                }
            })
        </script>
    </body>
</html>

六.vue中v-bind(:),v-for指令

v-bind是用来动态绑定标签元素的属性
绑定img中src属性

<img v-bind:src="url" alt="这是一张图片"><img :src="url" alt="这是一张图片">

v-bind动态绑定class属性

在这里插入代码片
已标记关键词 清除标记
<p> <span style="font-size:16px;color:#009900;"><strong>Vue3.0来了,你还学的动吗?</strong></span> </p> <p> <br /> </p> <p> 2020年9月底,Vue3.0正式版终于发布了。Vue<span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">在全球拥有 130 多万用户 ,它被应用于各种不同的场景中。而在国内,更是<span>最火热的前端框架,<span>2.0与3.0的开发模式有了很大的改变,所以</span>3.0的全新版本势必会引发新的一波学习潮流。对于前端开发者来说,不管你嘴上如何“学不动”,注定离不开“真相定律”,Vue3.0是你提升自身技术能力,晋升中级工程师一定要掌握的。</span></span> </p> <p>   </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">本课程将基于 Vue3.0 正式版,从Vue基础语法入手,全面掌握 Vue3.0 全家桶技术栈,并结合实战项目开发,让你拥有Vue3.0项目开发经验,更好的掌握Vue开发企业项目的流程 。<br /> </span> </p> <p> <br /> </p> <p> <span id="__kindeditor_bookmark_end_43__"></span><span style="color:#009900;font-family:-apple-system, BlinkMacSystemFont, "font-size:16px;background-color:#FFFFFF;"><strong>本课程共包括三个模块</strong></span> </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">一、<strong>Vue基础篇</strong></span> </p> <p> <span style="background-color:#FFFFFF;">本模块将讲解Vue3.0基本用法、插值表达式、常用指令等知识点,还会精讲Vue 3.0核心语法,如计算属性、过滤器、监视器、模板、生命周期等内容。</span><span style="background-color:#FFFFFF;color:#121212;">会带你深入理解Vue组件化技术,讲解全局组件和局部组件的定义,组件间数据传递,以及Vue内置组件等知识点。让你掌握模块化的概念,会通过Vue脚本架搭建项目,并掌握使用Axios发送AJAX请求,</span><span style="color:#121212;">让你快速入门Vue3.0。</span><span style="background-color:#FFFFFF;color:#121212;"></span> </p> <p> <span style="background-color:#FFFFFF;color:#121212;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">二、<strong>Vue核心篇</strong></span> </p> <p> <span>这个模块会带你讲解Vue3.0全家桶的知识点(Vue Router路由+Vuex状态管理),涉及Vue路由的用法、包括路由嵌套、路由模式、编程式导航、路由守卫等,还会全面讲解Vuex状态管理机制及使用,理解state、mutation、action等核心概念,让你轻松掌握Vue全家桶。</span> </p> <p> <span><br /> </span> </p> <p> <span style="background-color:#FFFFFF;"> </span> </p> <p style="color:#121212;"> 三、<strong>项目实战篇</strong> </p> <span style="color:#121212;"></span> <p> 实战项目会贴近企业流程,按照企业级别代码质量和工程开发流程进行授课,让你理解这套技术在企业中被使用的真实流程,更好的掌握Vue各个基础知识点。项目开发流程包括项目需求分析->环境搭建与配置->搭建远程Git仓库->接口分析->项目开发->打包上线。 </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#009900;"><strong>实战项目涉及内容</strong></span> </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202010240323559662.png" /> </p> <p> <br /> </p>
相关推荐
简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除,从账户中取出amt,如果amt>账户余额抛出异常,一个实体Bean可以表示不同的数据实例,我们应该通过主键来判断删除哪个数据实例…… ejbCreate函数用于初始化一个EJB实例 5个目标文件,演示Address EJB的实现 ,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口函数得到远程接口的引用,用远程接口的引用访问EJB。 EJB中JNDI的使用源码例子 1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上直接地使用它,但是它的主要作用是供程序使用的。本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除…… Java Socket 聊天通信演示代码 2个目标文件,一个服务器,一个客户端。 Java Telnet客户端实例源码 一个目标文件,演示Socket的使用。 Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密   Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。   设定字符串为“张三,你好,我是李四”   产生张三的密钥对(keyPairZhang)   张三生成公钥(publicKeyZhang)并发送给李四,这里发送的是公钥的数组字节   通过网络或磁盘等方式,把公钥编码传送给李四,李四接收到张三编码后的公钥,将其解码,李四用张三的公钥加密信息,并发送给李四,张三用自己的私钥解密从李四处收到的信息…… Java利用DES私钥对称加密代码实例 同上 java聊天室 2个目标文件,简单。 java模拟掷骰子2个 1个目标文件,输出演示。 java凭图游戏 一个目标文件,简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥   Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥,通常应对私钥加密后再保存、如何从文件中得到公钥编码的字节数组、如何从字节数组解码公钥。 Java数据压缩与传输实例 1个目标文件 摘要:Java源码,文件操作,数据压缩,文件传输   Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页