Vue的基本使用-01
Vue的基本使用-01
1. Vue概述
Vue 是什么？
-
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
- 声明式渲染–组件系统–客户端路由–集中式状态管理–项目构建（这些可以部分使用，也可以全部使用）
-
vue 的核心库只关注视图层
-
优点
-
易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
-
灵活：在一个库和一套完整框架之间自如伸缩
-
高效：20kb运行大小，超快虚拟DOM
-
简单易上手
-
2. Vue的基本使用步骤
2.1 基本使用步骤
- 需要提供标签用于填充数据
- 注意： 在标签中我们使用插值语法的形式 即 { {}} 进行填充数据
- 引入vue.js库文件
- 注意：一定要先引入Vue文件 再使用Vue语法 因为存在作用域的问题
- 使用vue的语法做功能
- new Vue() 创建一个Vue的实例
- 在构造函数中以对象的形式做一些配置
- 利用Vue将数据渲染到页面上
- 数据写在data 里面
2.2 例：使用Vue将helloworld 渲染到页面上
2.3 Vue.js之HelloWorld细节分析
1.实例参数
- el：元素的挂载位置（值可以是CSS选择器或DOM元素）
- data：模型数据（值是一个对象）
2.插值表达式用法
- 将数据填充到HTML标签中
- 插值表达式支持基本的计算操作
3.Vue代码运行原理分析
- vue代码 通过vue框架编译成 原生js代码
3. Vue模板语法
3.1 模板语法概述
3.1.1 什么是前端渲染
- 把数据填充到HTML标签中
3.1.2 前端渲染方式
- 原生js拼接字符串
- 使用前端模板引擎
- 使用vue特有的模板语法
3.1.3 vue模板语法概览
- 插值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
3.2 指令概念与v-cloak指令用法
3.2.1 什么是指令？
- 指令的本质就是自定义属性
- Vue中指令都是以 v- 开头
3.2.2 v-cloak
1. 为什么会有闪烁问题？
- 代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上 当加载完js后才把插值语法替换掉 所以我们会看到闪烁问题
2. 如何解决插值语法的闪烁问题？
-
v-cloak
-
防止页面加载时出现闪烁问题（先显示{ {}}内容，然后迅速替换成数据）
/* v-cloak指令的用法 1、提供样式 [v-cloak]{ display: none; } 2、在插值表达式所在的标签中添加v-cloak指令 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果 */ <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ display: none; } style> <body> <div id="app"> <div v-cloak>{ {msg}}div> div> <script type="text/javascript" src="js/vue.js">script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue' } }); script> body>
3.3 数据填充相关的3个指令的用法
v-text
- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<div id="app">
<p v-text="msg">p>
<p>
{
{msg}}
p>
div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
v-html
-
用法和v-text 相似 但是它可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<div id="app"> <p v-html="html">p> <p>{ {message}}p> <p v-text="text">p> div> <script> let app = new Vue({ el: "#app", data: { message: "通过双括号绑定", html: "html标签在渲染的时候被解析", text: "html标签在渲染的时候被源码输出", } }); script>
v-pre
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{
{ this will not be compiled }}span>
<span v-pre>{
{msg}}span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
3.4 数据响应式概念与v-once用法
什么是数据响应式？
- 当数据改变的时候页面内容跟随者改变
v-once
- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<span v-once>{
{ msg}}span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
3.5 双向数据绑定与v-mode指令用法
双向数据绑定
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
v-model
- v-model是一个指令，限制在
、