vue——VM对象和基础指令
一、VUE
简介:
- Vue.js是前端的主流框架之一,和Angular.js、React.js并称为前端三大主流框架。
- 是一款用于构建用户界面的 JavaScript 框架。
- Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计
- 它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助用户高效地开发用户界面。
- 是个很多js工具代码的js文件。
Vue.js 的特点:
- 数据驱动
- Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
- Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标
- 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
前端三大主流框架:
vue.js 数据驱动和组件化开发,轻量级,分层渐进式框架
React.js 数据驱动和组件化开发,灵活性很高,需要什么都得自己构建逻辑自己写
Angular.js 数据驱动 1.0 ,加上了组件化开发2.0,重量级框架;大型企业OA办公(指令系统)
引入方式:
第一类:
1.本地js文件引入
2.CDN引入
3.webpack 打包
4.编辑器生成(HBuilder)
第二类:(vue脚手架 需要加载器转码再引入到网页中)
1.自己打包配置加载器(自己构建vue脚手架)
2.官方脚手架
npm i @vue/cli -g
vue create app
cd app
npm run serve
3.可视化项目管理方式 vue ui
4.编辑器直接生成脚手架环境的方式(HBuilder)
包的版本管理:
示例版本:7.18.6 已更新到12.3.8
"~7.18.6" :直接下载最新版 即12.3.8
"^7.18.6" :下载7-版本号的最新版 如 7.20.8(7开头的版本中的最新版)
"7.18.6" :下载固定版本 即7.18.6 不能升级
二、VM对象
let vm = new Vue({el: "#app", data: {}
})
意义:
- vm为new Vue构造函数创建的对象
- el:element 选择元素,填选择器
- data:data对象里面的是数据源
- data的属性值与vm对象的属性值一样是因为把data的属性也设置到vm上
三、插值表达式
{{js表达式}}
- 在标签尖括号中使用{{}}插入js表达式(变量,函数调用,三目运算等)
- 插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名
{{js表达式}}外不是js的环境 直接显示内容
<div id="app">
<!-- {{msg1}}这个插值表达式写在h2这个标签中 msg1这个标识符是data中的msg1属性 --><h2>{{msg1}}</h2><h2>{{msg1+"这一句是js表达式(拼接)"}}</h2><h3>{{obj.name}}:{{obj.age}}</h3><h4>现在学的是:{{arr[0]}}</h4>
</div><script>let vm = new Vue({el: "#app", data: {msg1: "hello",obj: {age: 21,name: "haha",},arr: ["vue", "react"],}})</script>
显示结果:
四、文本指令
- v-html ==>相当于innerHTML
- v-text==>相当于innerText
- v-pre==>静默-跳过编译 :插件表达式直接被识别为文本,而不是js表达式
v-cloak==>有属性的标签相当于在构建虚拟节点的时候就会有这个属性:
当data的数据生成时,该标签会自动去掉属性
可以利用这个特性在css中把某个元素在加载初期写成隐藏样式
<div class="app1" v-cloak><div v-text="msg2"></div><div v-html="msg3"></div><div v-pre>{{msg4}}</div><span v-html>{{msg5}}</span><br><br><div v-text="info.name"></div><div v-html="info.snum"></div><br><br></div><script>new Vue({el: ".app1",data: {msg2: "<h2>v-text :底层是innerText</h2>",msg3: "<h2>v-html :底层是innerHTML</h2>",msg4: "跳过编译 (静默) 原样显示内容{{msg4}}",msg5:"上一内容是 跳过编译(静默) 所以原样显示内容{{msg4}}",info: {name: "xixi",snum:"H5220301",},}})</script>
显示结果:
面试题:
vue第一次加载的时候 页面上的数据会闪烁:
界面加载的时候会把节点直接挂载到文档树中,导致{{js表达式}}这个字符串会显示一下
vue对象生成data数据时会再次刷新界面 把{{js表达式}}字符串替换成结果字符串
所以界面第一次加载的时候会闪屏
解决办法:
1.添加一个属性选择器:v-cloak 在vue框架运行时 会把项目中的v-cloak属性去掉
css中 :[v-cloak]{display:none}
div中添加属性选择器 运行vue前锁住代码 运行时解锁代码
2.$mount挂载
3.尽量使用指令(v-html,v-text)渲染页面
五:属性绑定
- 所有标签的属性都可以绑定
- 标准写法: v-bind:src="" v-bind:value=""
- 简写形式: :src="" :value=""
<div class="app2"><img v-bind:src="obj.tx"><div v-text="obj.name"></div><h3 v-html="week[0]"></h3><a v-bind:href="baidu[0].source">{{baidu[0].site}}</a><a v-bind:href="baidu[0].source" v-html="baidu[0].site"></a><br><input type="text" v-bind:value="email"><br><input type="text" :value="email"></div><script>new Vue({el: ".app2",data: {obj: {name: "dog",age: 1,tx: "https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF"},week: ["Monday", "Friday"],baidu: [{source: "http://www.baidu.com",site: "百度"}],email: "123@qq.com",}})</script>
显示结果:
vue——VM对象和基础指令相关推荐
- vue基础1--脚手架的使用与vue基础指令
脚手架的使用与vue基础指令 安装 vue-devtools 安装vscode插件 1. Vue基本概念 1.1 Vue是什么 1.2 Vue学习的方式 2. @vue/cli脚手架 2.1 @vue ...
- Vue--》 Vue六大基础指令使用方法
目录 Vue指令 内容渲染指令 v-text.{{}}.v-html 属性绑定指令 v-bind 事件绑定指令 v-on 双向绑定指令 v-model 条件渲染指令 v-show.v-if.v-els ...
- vue快速复制快捷键_vue快捷键与基础指令详解
v-bind可以简写成 : → v-on:click可以写成@click v-if实例 可以通过对对象操作条件来实现想要展示的效果 现在你看到我了 天气炎热 new Vue({ el: &quo ...
- 【Vue】v- xxx 基础指令
文章目录 v- xxx 基础指令 1.v-text 文本指令 2.v-html 标签指令 3.v-on 事件指令 实战:计数器 补充 4.v-show 图片指令 5.v-if 条件指令 6.v-bin ...
- 【vue】1、vue介绍及vue基础指令
1.VUE介绍 数据驱动视图:vue监听数据的改变,自动渲染界面,无需操作DOM. 双向数据绑定:数据源和界面上的数据保持一致,改变其中一个另一个也会发生改变. MVVM是实现vue数据驱动视图和数据 ...
- Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
- Vue _ 教程版 02 指令
目录 目标 一.模板语法 1.1.插值表达式 1.2.指令 1-2-1. v-text 指令 1-2-2. v-html 指令 二.常用指令 2.1.v-show 指令 2.2.v-if 指令 2.3 ...
- Vue核心技术-5,列表渲染指令 v-for
一,前言 目前对前期目录进行了简单的梳理,周末会找时间调一下顺序, 顺便再补充一下遗漏的知识点,让过度更加平缓一些, 例如前面没有说计算属性,但目前的列表渲染就要用到了...囧在对目录梳理的过程中,发 ...
- vue自定义全局和局部指令
一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类 1.全局指令 2.局部指令 3.自定义全局指令格式 ...
最新文章
- java项目_JNPF快速开发平台-简单快速高效开发java项目
- 服务器上tomcat修改内存,修改Tomcat运行内存
- mariadb安装和使用
- 雷军做程序员时写的博客,太牛了。。
- DDD领域驱动设计特点及难点
- linux centos删除安装的包,CentOS yum认为已删除的软件包仍在安装中
- 定制自己的Windows CE 5.0 ARM中文模拟器(转)
- 2017.3.18 每日小记
- css首行缩进2个字符
- perl常用正则表达式集合
- linux信号基本概念及如何产生信号
- SRNTT:Image Super-Resolution by Neural Texture Transfer
- 蛋白+小分子配体md(详细保姆教程)
- SeaChest Utilities 工具,让你的硬盘功耗又低又长寿
- java socket保活_gb28181简单实现sip信令服务器(java版基于springboot):四、sip摄像头心跳保活、推流(tcp/udp)和结束推流...
- bandicam安装及使用教学
- Word未保存文档恢复
- 密码学之前后向安全性
- 商务办公软件应用与实践【8】
- ubuntu 16.04 14.04 安装各种软件