好家伙，要来了，经典“hello world”

试用一下vue

① 导入 vue.js的 script 脚本文件

② 在页面中声明一个将要被vue所控制的DOM区域

③ 创建vm实例对象（vue实例对象）

试一试 :随便开一个.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Great</title>

</head>

<body>

    <div id="app">{{ username }}</div>

    <!-- 1.导入Vue的库文件,在window全局就有了Vue这个构造函数-->

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

    <!--2.创建Vue的实例对象-->

    <script>

        //vm 就是viewmodel

        const vm = new Vue({


            //el属性是固定的写法,表示当前的vm实例要控制页面上的那个区域,接受的值是一个选择器

            el:'#app',


            //data对象就是要渲染到页面上的数据

            data:{

                username:'zhangsan'

            }

        })

    </script>

</body>

</html>

效果如下:

看着没什么问题

2.vue的指令

　　2.1.内容指令v-text

　　特性:会覆盖标签内部原本的内容

　　　

　　2.2.{{}}插值语法

　　如这个

<div id="app">{{ username }}</div>

　　2.3.v-html指令

　　用于标签的插入

1．内容渲染指令

1．v-text 指令的缺点：会覆盖元素内部原有的内容！
2．{{ }}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
3．v-html指令的作用：可以把带有标签的字符串，渲染成真正的HTML内容！

2．属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

·在vue中，可以使用v-bind：指令，为元素的属性动态绑定值；

·简写是英文的：

·在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

属性绑定v-bind

(v-bind:src 与 :src是等效的  ":"是"v-bind"的简写)

为元素的属性动态绑定

<div :title=＂'box'＋index＂>这是一个 div</div>

用法如下:

效果如下:

第六十篇：Vue的基本使用的更多相关文章

  1. 第十篇:vue.js for循环语句(大作业进行时)

    Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...

  2. 第四十篇:Vue的生命周期(一)

    好家伙,军训结束了,回归 Vue实例的生命周期 1.什么是生命周期? 从Vue实例创建,运行到销毁期间总是伴随着各种各样的事件,这些事件,统称为生命周期. 2.什么是生命周期钩子? 生命周期函数的别称 ...

  3. 第六十篇、音视频采集硬编码（H264+ACC）

    使用 AVCaptureSession进行实时采集音视频(YUV.),编码 通过AVCaptureVideoDataOutputSampleBufferDelegate获取到音视频buffer- 数据 ...

  4. FastAPI（六十二）实战开发《在线课程学习系统》需求分析

    前言 基础的分享我们已经分享了六十篇,那么我们这次分享开始将用一系列的文章分享实战课程.我们分享的系统是在线学习系统.我们会分成不同的模块进行分享.我们的目的是带着大家去用fastapi去实战一次,开 ...

  5. 《手把手教你》系列技巧篇（六十）-java+ selenium自动化测试 - 截图三剑客 -中篇（详细教程）

    1.简介 前面我们介绍了Selenium中TakeScreenshot类来截图,得到的图片是浏览器窗口内的截图.有时候,只截浏览器窗口内的图是不够的,而且TakeScreenshot截图只针对浏览器的 ...

  6. 《手把手教你》系列技巧篇（六十五）-java+ selenium自动化测试 - cookie -下篇（详细教程）

    1.简介 今天这一篇,宏哥主要讲解:利用WebDriver 提供可以读取.添加和删除cookie 信息的相关操作方法.验证浏览器中是否存在某个cookie.原因是:因为基于真实的cookie 的测试是 ...

  7. 《手把手教你》系列技巧篇（六十六）-java+ selenium自动化测试 - 读写excel文件 - 上篇（详细教程）

    1.简介 在自动化测试,有些我们的测试数据是放到excel文件中,尤其是在做数据驱动测试的时候,所以需要懂得如何操作获取excel内的内容.由于java不像python那样有直接操作Excle文件的类 ...

  8. 《手把手教你》系列技巧篇（六十八）-java+ selenium自动化测试 - 读写excel文件 - 下篇（详细教程）

    1.简介 今天继续操作Excle,小伙伴或者童鞋们是不是觉得宏哥会介绍第三种工具操作Excle,今天不介绍了,有两种就够用了,其实一种就够用了,今天主要是来介绍如何使用不同的数据类型读取Excel文件 ...

  9. 《手把手教你》系列技巧篇（六十九）-java+ selenium自动化测试 - 读取csv文件（详细教程）

    1.简介 在实际测试中,我们不仅需要读取Excle,而且有时候还需要读取CSV类的文件.如何去读取CSV的文件,宏哥今天就讲解和分享一下,希望对你能够有所帮助.前面介绍了如何读取excel文件,本篇介 ...

随机推荐

  1. Charles如何抓取https请求-移动端+PC端

    Charles安装完成,默认只能抓取到http请求,如果查看https请求,会显示unkonw或其它之类的响应.所以需要先进行一些配置,才能抓取到完整的https请求信息.下面针对PC端和手机端抓包的 ...

  2. 2分钟实现一个Vue实时直播系统

    前言 我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下.第一步,购买云直播服务 首先,你必须去阿里云或者腾讯云注册一个直播服务.也花不了几个钱,练手的话,几十块钱就够了 ...

  3. kubernetes之常用核心资源对象

    部门产品线本身是做DEVOPS平台,最近部署架构也在往K8S上靠了,不得不学一下K8S.自己搭建了K8S集群与harbor仓库来学习. 1.kubernetes之常用核心资源对象 1.1.K8s服务部 ...

  4. Java基础-JVM篇

    1.1 .线程 ​ 这里所说的线程指程序执行过程中的一个线程实体.JVM 允许一个应用并发执行多个线程.Hotspot JVM 中的 Java 线程与原生操作系统线程有直接的映射关系.当线程本地存储. ...

  5. 对象数组和对象对象数组的for-each循环

    对象数组的声明 类名称 对象数组名[] = null: 对象数组名 = new 类名称[长度] 定义并开辟数组 类名称 对象数据名[] = new 类名称[长度]; 在声明一个对象数组后,必须对每个数 ...

  6. SSH 多密钥配置

    目录 前言 一.SSH 是什么 二.密钥生成工具 三.密钥类型 四.本地配置 1.单密钥配置 2.多密钥配置 五.远端配置 1.GitHub/Gitee 2.服务器 前言 当我们从 GitHub 克隆 ...

  7. jupyter 反向代理配置

    抓了下包,看了一下WS连不上,参考这个,问题解决 location / { proxy_pass http://127.0.0.1:8813/; # JUPYTER_PORT 为 Jupyter 运行 ...

  8. jdbc 04: 配置连接信息

    jdbc连接mysql,将需要的信息配置到文件中 package com.examples.jdbc.o4_配置连接信息; import java.sql.Connection; import jav ...

  9. Github隐藏使用技巧（超详解）

    目录 github使用说明 查看别人的主页和项目 上传自己的项目 使用git下载github上的文件 使用git实现代码管理 使用git恢复被修改的文件 更多关于git使用小技巧 github使用说明 ...

  10. expect交互学习笔记

    expect主要应用于自动化交互式操作的场景;比如服务器过多,密码也不尽相同的情况下,需要便捷的登陆服务器,而无需输入密码的情况,亦或者便捷登陆mysql/ftp等需要交互的场景:也可以在服务器之间通 ...