前言本片文章是vue系列第一篇整理了vue的基础和发展史
个人主页:尘觉主页
个人简介:大家好,我是尘觉,希望我的文章可以帮助到大家,您的满意是我的动力
在csdn获奖荣誉: csdn城市之星2名
Java全栈群星计划top前5
端午大礼包获得者
欢迎大家:这里是CSDN,我总结知识的地方,欢迎来到我的博客,感谢大家的观看
如果文章有什么需要改进的地方还请大佬不吝赐教 先在次感谢啦
Vue (读音 /vjuː/,类似于 view) 是一个前端框架, 易于构建用户界面
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或项目整合
支持和其它类库结合使用
开发复杂的单页应用非常方便
Vue 是 Vue.js 的简称
https://cn.vuejs.org/
https://github.com/vuejs
官网文档:https://cn.vuejs.org/v2/guide/index.html
下载: https://cn.vuejs.org/v2/guide/installation.html
小技巧:为了让 IDEA识别Vue 代码,需要安装插件 Vue.js
div元素不是必须的,也可以是其它元素,比如span,但是约定都是将vue实例挂载到div
因为div更加适合做布局这里就用div了
id 不是必须为app , 是程序员指定,一般我们就使用app
{{message}} : 插值表达式
message 就是从model的data数据池来设置
当我们的代码执行时,会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换 , 如果没有匹配上, 就是输出空
el: “#app”, //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue快速入门title>
head>
<body>
<div id="app">
<h1>欢迎你{{message}}-{{name}}h1>
div>
<script src="vue.js">script>
<script>
//创建Vue对象
/**
* 解读
* 1. 创建Vue对象实例
* 2. 我们在控制台输出vm对象,看看该对象的结构!(data/listeners)
*
*/
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
message: "Hello-Vue!",
name: "大家好"
}
})
console.log("vm=>", vm);
console.log(vm._data.message);
console.log(vm._data.name);
console.log(vm.name);
console.log(vm.message);
script>
body>
html>
从案例可以体会声明式渲染:Vue.js 采用简洁的模板语法来声明式地将数据渲染进DOM 的系统, 做到数据和显示分离
Vue 没有繁琐的 DOM 操作,如果使用 jQuery,我们需要先找到 div 节点,获取到 DOM
对象,然后进行节点操作, 显然 Vue 更加简洁
本片讲解了Vue的基本介绍和怎么下载以及解读MVVM机制和数据绑定的分析
vue系列
Vue2 脚手架下载及配置淘宝镜像–和ieda的配置和打开
Vue 项目结构和文件分析
欢迎大家加入我的社区 尘觉社区
文章到这里就结束了,如果有什么疑问的地方请指出,诸佬们一起来评论区一起讨论
希望能和诸佬们一起努力,今后我们一起观看感谢您的阅读
如果帮助到您不妨3连支持一下,创造不易您们的支持是我的动力