2 - Vue 学习笔记 - Vue.js 体验

最新推荐文章于 2024-01-10 19:58:44 发布

0rigami

最新推荐文章于 2024-01-10 19:58:44 发布

阅读量53

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_53708566/article/details/117774110

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

第一个 Vue 程序

体验一下 Vue 的响应式

Vue 数据展示

<body>
    <div id="app">
        {{message}}
        <h2>{{message}}</h2>
        <h1>{{name}}</h1>
    </div>
    <div>{{message}}</div>
    <script src="../js/vue.js"></script>
    <script>
        // let(变量) / const(常量)
        // 因为 var 在设计时存在缺陷，所以一般使用 let 或 cosnt
        const app = new Vue({
            el: "#app", // 用于挂载要管理的元素
            data: { // 定义数据
                message: "hello vue.js!",
                name:"tt"
            }
        })
    </script>
</body>

创建 Vue 对象的时候，传入了一些 options:{}，{ }中包含了
- el 属性：该属性决定了这个 Vue 对象挂载到哪个元素上，很明显，在这里面是挂载到了 id 为 app 的元素上。
- data 属性：该属性中通常会存储一些数据
1. 这些数据可以是直接定义出来的（比如上面那样）
2. 也可以是来自于网络，从服务器加载而来的
3. 在 Vue 中，这些数据是双向绑定的，只要修改了其中一边的值，另一边的值会动态地跟着改变，十分方便（我们可以打开开发中模式的控制台，修改 app 对象的值观察到变化）

让我们想一下原生 js 是怎么实现的
  1. 创建 div 元素，设置 id 属性
  2. 定义一个变量 message
  3. 将 message 放入 div 元素中
  4. 如果需要更改，则修改 message
  5. 将修改的 message 替换到 div 中

Vue 列表显示

现在，展示一个更加复杂的数据：数据列表。
- 我们可以通过服务器请求过来一个列表，并希望展示到 HTML 中
在 HTML 中，使用 v-for 指令，如下面（后续会详细说明）

<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"你好啊",
                movies:['星际穿越','大话西游','少年派','盗梦空间']
            }
        })
    </script>
</body>

这样就动态生成了一个 ul 里面包含有 4 个 li，当然，更重要的是，它还是响应式的，当数组数据发生改变时，界面也会自动改变（依然可以使用开发者模式的控制台，对数组添加元素，观察变化）

在原生 js 中，我们需要遍历数组，并且创建一个 li 元素，然后将值放入 li 中，然后再把 li 放到 ul 下。

Vue 实现计数器

<div id="app">
	<h2>当前计数：{{counter}}</h2>
	<!--	<button v-on:click="counter++">+</button> -->
	<!--	<button v-on:click="counter&#45;&#45;">-</button> -->
	<button v-on:click="add">+</button>
	<button @click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			counter: 0
		},
		method: {
			add: function () {
				console.log('add被执行');
				// 这一边一定要加 this，不然会找不到这个变量
				this.counter++;
			},
			sub: function () {
				console.log('sub被执行')
				this.counter--;
			}
		}
	});
</script>

</body>

这里又使用到了新的指令和属性
- 新的属性： methods ，该属性用于在 Vue 对象中定义方法
- 新的指令： @click(v-on:click)，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法，方法通常是 methods 中定义的方法

@click 是 v-on:click 的语法糖，也就是简写

0rigami

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2 - Vue 学习笔记 - Vue.js 体验

第一个 Vue 程序体验一下 Vue 的响应式<body> <div id="app"> {{message}} <h2>{{message}}</h2> <h1>{{name}}</h1> </div> <div>{{message}}</div> <script src="../js/vue.js"&gt
复制链接

扫一扫