初识VUE

文章目录

    • Vue是什么
    • 1.创建一个Vue实例
    • 2.插值表达式'{{ }}'
    • 3.Vue的响应式特性
    • 4.开发者工具的安装

Vue是什么

概念:Vue是一个用于构建用户界面的渐进式框架

①构建用户界面:基于数据渲染出用户看到的界面
初识VUE_第1张图片

②渐进式:循序渐进
初识VUE_第2张图片

③ 框架:一套完整的项目解决方案

1.创建一个Vue实例

初识VUE_第3张图片

<body>

<div class="box2">div>
<div class="box">div>
<div id="app">
	 
	 
	 <h1>{{ msg }}h1>
	 <a href="#">{{ count }}a>
div> 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>

<script>
//一旦引入Vuejs核心包,在全局环境,就有了 Vue 构造函数
const app=new Vue({
	//通过el配置选择器,指定Vue所管理的是哪个盒子
	el:'#app',
	//通过date提供数据
	data:{
		msg:'hello 黑马',
		count:666
	}
})
script>

2.插值表达式’{{ }}’

插值表达式
插值表达式是一种Vue的模板语法
**1.作用:**利用表达式进行插值,渲染到页面中
表达式:是可以被求值的代码,JS引擎会将其计算出一个结果
2.语法:{{ 表达式 }}

<body>
<h3>{{ title }}h3>
<p>{{ nickname.toUpperCase() }}p>
<p>{{ age>=18? '成年':'未成年' }}p>
<p>{{ obj.name }}p>
body>

3.注意点:
(1)使用的数据必须存在(data)

{{ hobby }}

(2)支持的是表达式,而非语句,比如2:if, for…

{{ if }}

(3)不能在标签属性中使用{{ }}插值

我是p标签

<body>

	<div id="app">
		{{ nickname }}
		{{ nickname.toUpperCase }}
		{{ nickname + '你好' }}
		{{ age>=18 ? '成年':'未成年' }}
		{{ friend.name }}
		{{ friend.desc }}
	div>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
	<script>
		const app = new Vue({
			el:'#app',
			data:{
				nickname:'tony'
				age:18,//成年
				friend:{
					name:'jepson',
					desc:'热爱学习 Vue'
			}
		})
	script>
body>

3.Vue的响应式特性

初识VUE_第4张图片

4.开发者工具的安装

在第三部分中,是通过控制台修改数据的,但我们可以用开发者工具,更方便快捷的调试修改数据(极简插件)

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