快速入门Vue第一天:Vue基础 挂载点,数据对象...

文章目录

    • 一、写在最前
    • 二、Vue基础
      • 1、el挂载点
      • 2、data:数据对象

一、写在最前

目的:快速入门Vue,学习分为四个部分:

  • Vue基础
  • 本地应用
  • 网络应用
  • 综合应用

二、Vue基础

我们查看官方文档:https://cn.vuejs.org/v2/guide/installation.html,导入开发版本的vue.js文件,并且制作第一个简单Vue项目输出:你好,Vue!


<html>
	<head>
		<meta charset="utf-8" />
		<title>Vuetitle>
		<script src="js/vue.js">script>
	head>
	<body>
		<div id="app">
			{
    {message}}
		div>
		<script>
			var app = new Vue({
      
				el:"#app",
				data:{
      
					message:"你好!VUE!",
				}
			})
		script>
	body>
html>

效果如图:
快速入门Vue第一天:Vue基础 挂载点,数据对象..._第1张图片
总结步骤:
1、导入开发版本的vue.js。
2、创建Vue实例对象,设置el属性data属性
3、使用简洁的模板语法把数据渲染到页面上。

1、el挂载点

el是用来设置vue实例挂载(管理)的元素。


<html>
	<head>
		<meta charset="utf-8" />
		<title>Vuetitle>
		<script src="js/vue.js">script>
	head>
	<body>
		{
    {message}}
		<div id="app">
			{
    {message}}
			<span>{
    {message}}span>
		div>
		<script>
			var app = new Vue({
      
				el:"#app",
				data:{
      
					message:"你好!VUE!",
				}
			})
		script>
	body>
html>

效果如图:
快速入门Vue第一天:Vue基础 挂载点,数据对象..._第2张图片
问:vue实例的作用范围?
vue会管理el选项命中的元素及其内部的后代元素

问:是否可以使用其他选择器?
可以使用标签、class、id选择器,建议使用id选择器

问:是否可以设置其他的dom元素?
可以使用其他的双标签,不能使用html和body。

2、data:数据对象

vue中用到的数据定义在data中。


<html>
	<head>
		<meta charset="utf-8" />
		<title>Vuetitle>
		<script src="js/vue.js">script>
	head>
	<body>
		<div id="app">
			{
    {message}}
			{
    {me.name}} {
    {me.sex}}
			<h2>去过的城市:h2>
			<li>{
    {home[0]}}li>
			<li>{
    {home[1]}}li>
		div>
		<script>
			var app = new Vue({
      
				el:"#app",
				data:{
      
					message:"下面我来介绍一下我自己:",
					<!-- array:[],obj:{
      }, -->
					me:{
      name:"李华",sex:"男"},
					home:["北京","上海","广州"]
				}
			})
		script>
	body>
html>

效果如图:
快速入门Vue第一天:Vue基础 挂载点,数据对象..._第3张图片
data中可以写复杂类型的数据,例如对象、数组等。
渲染复杂类型数据时,遵守js的语法即可。

你可能感兴趣的:(前端,vue,javascript)