【小白学习Vue | 2】学习Vue基本语法

目录

  • 一、Vue基本语法资源
  • 二、学习Vue基本语法
    • 1.文本传值
      • 1.1静态插值
      • 1.2动态传值
    • 2.更多

一、Vue基本语法资源

学习Vue基本语法:
本篇完全参考vue官网介绍:https://vuejs.org/v2/guide/index.html
也有官方给出了视频教学例子:在Scrimba上学习本课程
(这里需要外网,速度快一些;当然也是全英文教学,可以参考)【小白学习Vue | 2】学习Vue基本语法_第1张图片
本文写了如何测试及基本语法,更多语法参考官网介绍。

二、学习Vue基本语法

1.文本传值

1.1静态插值

html:

  1. 语法(双花括号): {{message}}
  2. 功能: 向页面输出数据
  3. 可以调用对象的方法

js:

  1. el:挂载到指定名称的html标签上

  2. data:绑定的数据 -->相当于给html中使用的时候所传的值

  3. methods:绑定的方法 [注意:其中this代表Vue对象]

我在HBuilder进行验证性学习:【小白学习Vue | 1】安装Vue并配置HBuilder
在之前的vuetest.html中添加如下代码:


<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
	head>
	<body>
		<div id="app">
		  {{ message }}
		div>
		<script>
		new Vue({
		    el:'#app',
		    data: {
		        message:'Hello World!'
		    }
		});
		script>
	body>
html>

这里是创建vue实例与html上的元素进行绑定

el:让vue的实例接管哪一个element,上面的代码是接管app;

data:为message实例里面的数据。
【小白学习Vue | 2】学习Vue基本语法_第2张图片

1.2动态传值

将vuetest.html中修改为如下代码:

<div id="app-2">div>
var app2 = new Vue({
  el: '#app-2',
  template: '<h1>Hello! {{msg}} The number is {{number}}h1>',
  data: {
    msg: "How old are you",
	number: 10086

  }
})

挂载点:就是html中的div的那个app-2就为挂载点;

实例:script中new Vue就是一个实例;

模板:挂载点内部的内容都称之为模板,如上面的template。

挂载点用于显示数据,实例用于存储数据和其他绑定,模板用于提供数据。
【小白学习Vue | 2】学习Vue基本语法_第3张图片
就这样依次测试!

2.更多

Vue基本语法有很多文章进行解释过,这里虽然没有贴出来,
但是建议实践运行每个小步骤,只看的收获是不够的。

接下来的步骤不重复:

  1. Vue介绍官网
  2. 前端笔记-Vue框架的基本认识
  • 下面的内容都是有必要学习的:
    Vue中的属性绑定和双向数据绑定
    Vue中的计算属性和侦听器
    v-if,v-show,v-for指令
    TodoList功能开发
    TodoList中组建的拆分
    TodoList的删除

开始一个一个测试吧!

你可能感兴趣的:(vue,Java前后端开发学习)