黑马-Vue 四小时入门

最新推荐文章于 2022-12-18 18:46:43 发布

keinee

最新推荐文章于 2022-12-18 18:46:43 发布

阅读量289

点赞数

分类专栏： # VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/baekhyunee_05/article/details/121674762

版权

文章目录

Vue 4小时入门

Vue 4小时入门

1. Vue 基础

1.1 Vue 简介

JavaScript 框架
简化 Dom 操作
响应式数据驱动

1.2 第一个 Vue 程序

官方文档：

Vue 2 : https://cn.vuejs.org/

Vue 3 : https://v3.cn.vuejs.org/

导入开发版本的 Vue.js

开发环境版本为完整版，生产环境版本为 mini 版
创建 Vue 实例对象，设置 el 属性和 data 属性
使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue 基础</title>
	</head>
	<body>
		<!-- 3.渲染 -->
		<div id="app">{
  { message }}</div>
		<!-- 1.引入 -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 2.创建实例对象 -->
		<script>
			var app = new Vue({
      el: '#app', data: {
      message: 'Hello Vue!' } })
		</script>
	</body>
</html>

1.3 el: 挂载点

el 是用来设置 Vue 实例挂载(管理)的元素
el 命中的元素内部可以多层嵌套
建议使用 id选择器，以免造成语义不清
只支持双标签，但不支持 html 和 body

1.4 data:数据对象

Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据
渲染复杂数据时，遵守 js 的语法即可

2. 本地应用

2.1 内容绑定，事件绑定

2.1.1 v-text

作用：设置标签的文本值 (textContent)
默认写法会替换全部内容，使用插值表达式{ {}} 可以替换指定内容

2.1.2 v-html

作用：设置标签的 innerHTML
内容中有 html 结构会被解析为标签
v-text 指令无论内容是什么，只会解析为文本

2.1.3 v-on 基础

作用：为元素绑定事件
事件名不需要写 on
可以简写为 @
绑定的方法定义在 methods 属性中
方法内部通过 this 关键字可以访问定义在 data 中数据

2.1.4 案例：计数器

data 中定义数据：比如 num
methods 中添加两个方法：比如 add(递增)，reduce(递减)
使用 v-text 将 num 设置给 span 标签
使用 v-on 将 add,reduce 分别绑定给 +，- 按钮
累加到10，或者递减到0，给出提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>
<body>
<div id='app'>
<!-- <input type="button" value="-" v-on:click="reduce"> -->
<button v-on:click="reduce">-</button>
<span>{
  { num }}</span>
<!-- <input type="button" value="+" v-on:click="add"> -->
<button @click="add">+</button>

</div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
     
        el:'#app',
        data:{
     
            num:0
        },
        methods:{
     
            reduce:function(){
     
                if(this.num>0)
                {
     
                    this.num --
                }
                else{
      alert("减到底了")}
                
            }
            , add: function () {
     
                if (this.num < 10) {
     
                    this.num ++
                }
               else{
      alert("加不动了")}
            }
        }
    })
</script>


</body>