vue.js教程一:一小时掌握vue.js基础

vue.js 一个渐进式的JavaScript框架
渐进式框架的大概意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分。
首先学vue得掌握前端的一些最基本的技术
html css js
然后就可以开始了
不知道大家有没有留意官网的操作视频
我觉得那样的演示方式也很适合初学vue
我们所有的事情都在一个页面上来进行
打下基础 入门 入门就是掌握vue的语法
后面再去构建应用 再去和我们的后台进行连接这才是正确的打开方式
不像有的教程直接就开始给你搭个框架 你就在里面写
怎么来的都不知道
既然是到了前端html 那么一定是做DOM操作
DOM操作是什么:Dom->document 文档操作,说白了前端就是一个有标签的文档 罢了 我们进行控制元素的显示啥的 ,就叫DOM操作

学习vue需要准备什么
一款IDE vscode 或者HBuilderX
我们仅仅只是用它打开一个html文件 方便我们写代码罢了
你觉得编码速度不重要 可以使用记事本去打开 一样的
然后是谷歌浏览器
就可以了 准备一个初始化页面

<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
    <meta charset="utf-8" > 
    <title>标题title>
    <meta name="keywords" content="关键字" /> 
    <meta name="description" content="网页描述" />
	<script  src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
		
head>
<body>

body>
html>

在这里插入图片描述
这里是通过CDN引入的vue.js 当然你可以下载到本地引用
然后用IDE和浏览器打开你的HTML界面
vue.js教程一:一小时掌握vue.js基础_第1张图片
这就是我们的操作空间啦 就可以开始学了
1.声明式渲染
vue.js教程一:一小时掌握vue.js基础_第2张图片
我们输入这么几行代码 保存 然后网页F5刷新一下
可以看到上面显示了Hello Vue!
Vue是响应式的,就是说它自动将dom元素进行了关联
当数据变化的时候他会实时的变化
现在我们在控制台修改一些message这个数据 然后回车
vue.js教程一:一小时掌握vue.js基础_第3张图片
可以看到元素的值变了 想想以前怎么去改这个值就应该可以明白不同之处,我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。
2.条件与循环
v-if
我们对页面进行小小的改动 加入条件

vue.js教程一:一小时掌握vue.js基础_第4张图片
继续在控制台输入 app3.seen = false,你会发现之前显示的消息消失了。
v-for
加载一个有序列表
vue.js教程一:一小时掌握vue.js基础_第5张图片
我们来试着修改一下数组
vue.js教程一:一小时掌握vue.js基础_第6张图片
也是实时的 我们把对象再换一下
再加入表格
vue.js教程一:一小时掌握vue.js基础_第7张图片
3.处理用户输入
v-on
事件监听
对于点击时间 我们这样 单机就可以增1
vue.js教程一:一小时掌握vue.js基础_第8张图片

v-model双向绑定
就是说数据可以会随着一边的变化另一边也会变化
vue.js教程一:一小时掌握vue.js基础_第9张图片
输入框和原先的apple绑定
4.组件化应用构建
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:
vue.js教程一:一小时掌握vue.js基础_第10张图片
在我看来 组件就是用来复用的模板
我们来定义一个组件
vue.js教程一:一小时掌握vue.js基础_第11张图片

它也像一个标签一样 这样我们就少写了

  • fruit
  • 这样一行代码 当然这个模板可以很大很大
    这样我们拿来用一个标签就搞定了
    当然这并不炫酷 毕竟这些代码写死了
    我们的模板需要为我们显示想要的元素
    所以我们要把数据传送到组件才行
    那我们改怎么做呢 试试就试试

    vue.js教程一:一小时掌握vue.js基础_第12张图片

    这样不知道大家能不能理解 就是我们通过属性注入的方式将我们的foods注入到了容器里面
    到这里 就属于是一些基础知识 接下来就可以进阶高级部分

你可能感兴趣的:(vue.js,vue.js)