vue2/vue3详细知识点
1.初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
1.js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
<!-- 准备好一个容器 --><div id="demo"><h1>Hello，{{name.toUpperCase()}}，{{address}}</h1></div><script type="text/javascript" >Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。//创建Vue实例new Vue({el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。name:'atguigu',address:'北京'}})
2.模板语法
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
3.v-model的用法：（v-model可以实时的更改页面和vue中的数据，但是只限于标签的属性有value的）
v-model ：value=‘’相当于， v-model=‘’（双向绑定）
<!-- 准备好一个容器--><div id="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/><h1>指令语法</h1><a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a><a :href="school.url" x="hello">点我去{{school.name}}学习2</a><!--上面的这两个a标签是等价的--><a href="http://www.baidu.com">点我冯志炫，我就。。。
vue2/vue3详细知识点相关推荐
- vue2+vue3小白零基础教程—vue2篇，全网2021最详细教程
vue教程 提示:Vue3系列请参考Vue2+Vue3小白零基础教程-vue3篇文章,本文为vue2篇. 1. Vue核心 1.1 Vue简介 1.1.1 Vue是什么 一套用于构建用户界面的渐进式J ...
- 黑马前端Vue2+Vue3全套视频教程上新！500+集资源免费领
互联网发展至今,前端工程师以其高需求量和高薪酬成为IT行业职场新贵. 走进现代前端开发行业,播妞发现,每一位前端开发人员都面临着一个重要决策,选择一个合适的框架. 这时,更符合时代大势所趋的前端框架 ...
- C++来了，详细知识点思维导图！
昨天提供了关于C语言的思维导图: 一文带你学C语言,详细知识点思维导图! 被一些朋友威胁. 我太难了,这不,求生欲极强的我,还是被迫再次营业. 思维导图原文地址: https://www.csdn.n ...
- 大学计算机基础超详细知识点(高手总结),大学计算机基础超详细知识点(高手总结).doc...
大学计算机基础超详细知识点(高手总结).doc 第一章 计算机及信息技术概述 电子计算机的发展历程 ①1946年2月由宾夕法尼亚大学研制成功的ENIAC是世界上第一台电子数字计算机."诞生了 ...
- NEFU ERP 企业资源计划[1] 详细知识点
NEFU ERP 企业资源计划[1] 详细知识点 ERP 企业资源管理计划 第 0 章 术语 第 1 章 ERP 概述 1.什么是 ERP 2.ERP 目的 3.ERP 应用 第 2 章 ERP 理论 ...
- [VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件 时间格式化代码 export default function formatSecond(value: number) {let millis ...
- C语言详细知识点（上）
❄️下一篇❄️C语言详细知识点(下) 文章目录 一.C语言概述 1.C语言的主要特点 2.算法的概念及特点 二.C程序设计的基础语法 1.常量和变量 2.数据类型 3.运算符和表达式 4.C 语句 5 ...
- vue2+vue3——36+
vue2+vue3--36+ 尚硅谷 vue2 vue2 Vue监测数据的原理_数组[18:56] 数组 vue 查看 没有 set() get() 对象 有 get() set() 监测不到 不更新 ...
- vue2+vue3——107+
vue2+vue3--107+ vue2 Vuex工作原理图[23:54] vue2 搭建Vuex环境[26:40] 插入 话题 npm i vue@3 store / index.js 修改 vue ...
最新文章
- 关于服务程序生成文件存放在哪的问题
- python中path语句什么意思_python中jsonpath模块有何用法？
- 关于GPS 车辆定位导航中的投影变换
- linux 修改ldap密码,Linux-ldap密码修改程序，如何加密ssha
- 格密码教程(二)：格的基本定义，格基转换
- CS224n —— lecture2的重难点讲解
- java spring 实现策略,Spring 环境下实现策略模式的示例
- python快捷键设置，环境设置、输出print、转义字符、标识符
- 计算机电路中bga是什么,bga芯片是什么 BGA和芯片有什么区别？
- python动态调用函数
- 刷机精灵官网版 v2.1.2 免费版
- MATLAB图像处理植物叶片面积计算
- BLE MESH中的Secure Network beacon包
- 音频信号处理——DTW
- [Err] 1418 - This function has none of DETERMINIST
- Docker数据卷挂载相关
- 基于python管理系统论文_基于Python语言的实验室管理系统的设计与实现
- 测度不变变换(Measure Preserving Transformation)
- 华为 BGP/MPLS VP#实验
- 快速有效增加网站外链的技巧
热门文章