Vue学习笔记——one：Vue基础

Vue基础

渐进式JavaScript框架

声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

官网：https://cn.vuejs.org/v2/guide/

易用：熟悉HTML、CSS、JavaScript知识后

灵活：在一个库和一套完整框架之间自如伸缩

高效：20kb运行大小，超快虚拟DOM

vue官方文档

Vue基本使用

步骤：

1、需要提供标签用于填充数据

2、引入vue.js库文件

3、可以使用vue的语法做功能

4、把vue提供的数据填充到标签里面

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）

data：模型数据（值是一个对象）

	//1、实例化
    let vm = new Vue({
        //2、添加选项参数
        //3、作用的元素
        el:"#app",
        //4、数据
        data: {
            name : 'jack Ma',
            age: 18,
            sex :'男'
         },
         //5、方法：函数
         methods: {}
     });

插值表达式用法

• 将数据填充到HTML标签里里面
• 插值表达式支持基本的计算操作

前端渲染

把数据填充到HTML

把模板和数据结合就是前端渲染，产物就是静态HTML

前端渲染方式

• 原生js拼接字符串
• 使用前端模板引擎
• 使用vue特有的模板语法

原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中。

缺点：不同开发人员的代码风格差别很大

使用前端模板引擎

基于模板引擎，拥有自己的一套模板语法规则

Vue模板语法

• 差值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

什么是指令？

指令的格式：以v-开始（比如：v-cloak）

指令的本质就是自定义属性

v-cloak指令

• 插值表达式存在问题：“闪动”
• 如何解决该问题：使用v-cloak指令
• 解决该问题的原理：先隐藏，替换好值后再显示最终的值

1、提供样式

[v-cloak]{
​		display:none;
​    }

2、在插值表达式所在的标签中添加v-cloak指令

原理：通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

数据绑定指令

• v-text 填充文本

  ​ 1、相比插值表达式更加简洁

• v-html 填充HTML片段

  ​ 1、存在安全问题

  ​ 2、本网站内部数据可以使用，来自第三方的数据不可以用

• v-pre 填充原始信息

  ​ 1、显示原始信息，跳过编译过程（分析编译过程）

<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{
  {msg}}</div>

var vm = new Vue({
	el:'#app',
	data:{
		msg:'holle'，
		msg1: '<h1>Html</h1>'
	}
})

数据响应式

• 如何理解响应式

  • html5中的响应式（屏幕尺寸的变化导致样式的变化）
  • 数据的响应式（数据的变化导致页面内容的变化

• 什么是数据绑定

  • 数据绑定：将数据填充到标签中

• v-once只编译一次

  • 显示内容之后不再具有响应式功能

  v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once，提高性能

双向数据绑定

双向绑定分析

• v-model指令用法