Vue.js 快速入门

最新推荐文章于 2024-04-19 00:17:37 发布

Throd

最新推荐文章于 2024-04-19 00:17:37 发布

阅读量125

点赞数

分类专栏： Vue.js 文章标签： Vue.js

原文链接：https://www.bilibili.com/video/av22950780?from=search&seid=6855933851065054243

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在学习小马哥的视频课程，很简短的课程，但是内容丰富。

Vue.js介绍
Vue.js是一套开发Web页面的JavaScript脚本框架。
要使用Vue.js，需要在html文档添加引用：

 <script src="https://unpkg.com/vue/dist/vue.js"> </script>

新建index.html:
在这里插入图片描述
其中，el：记载要使用的对应id的代码块；
data：vue中的保留字，进行数据绑定。
代码运行结果：

条件和循环v-if、v-for

v-if：条件判断式，根据表达式的真伪进行页面处理。

<p v-if=" 表达式">内容</p>

当表达式为true时，显示内容；当表达式为false时，不显示。

v-for：处理数组循环，将数据循环显示到页面上。

<ol>
	<li v-for="book in books">
	{{book.name}}
	</li>
</ol>

循环输出books数组中每一个book的name值。

综合例子：

<div id="BOOK">
	<h3>图书列表</h3>
	<div v-if="see">本周热销书籍</div>
	<ol>
		<li v-for="book in books">
		{{book.name}}--{{book.author}}
		</li>
	</ol>
</div>
<script>
var myVue=new Vue({
	el:"#BOOK",
	data:{
		see:true,
		books:[{name:'山河入梦',author:'格非'},
		       {name:'云边有个小卖部',author:'张嘉佳'},
		       ],
	},
});
</script>

当条件see为true时，显示“本周热销书籍”。
运行结果如下：
在这里插入图片描述

处理用户输入v-model

处理用户输入：v-model 为页面输入框进行数据绑定。
例如：input、select、textarea、components(组件)

<body>
<div id="input">
	<p>今天的水果:{{fruit}}</p>
	<input v-model="fruit">
</div>
<script>
	var myVue=new Vue({
		el:'#input',
		data:{fruit:'苹果'},
	});
</script>
</body>

在这里插入图片描述
运行结果：

修改输入框内容时，文本框也会同时显示：

按钮事件 v-on

v-on为元素绑定各种事件，例如：keydown、keyup、click、dbclick、load等事件。
可以使用@表示v-on的缩写。

<div id="Fruit">
	<p>你最喜欢的水果是： {{fruit}}</p>
	<button v-on:click="btnClick('苹果')">苹果</button>
	<button v-on:click="btnClick('西瓜')">西瓜</button>
	<button @click="btnClick('水蜜桃')">水蜜桃</button>
</div>
<script>
var myVue=new Vue({
	el:"#Fruit",
	data:{fruit:'香蕉'},
	methods:{btnClick:function(fname){
		this.fruit=fname;
	},
	},
});
</script>

运行结果，fruit初始值为：香蕉
在这里插入图片描述
点击按钮水蜜桃后，将该值赋给fruit

组件 component

component：定义页面的局部区域块，完成单独的页面小功能。
组件定义：
Vue.component(‘组件名’，{
props：[’ 属性名’]，
template：‘模板内容’
});

在这里插入图片描述
运行结果如下：

过滤器 filters

格式化变量内容的输出，例如输出日期格式化：2019-01-01和2019/01/01的日期是一样的只是表现的形式不一样。
过滤器方法： {{message | filters}}，其中 | 可以有多个。
例如：把message中的内容传到filters中对应的方法去，作为value值。

<template>
  <div class="hello">
    <p>{{message}}</p>
    <p>{{message | toUpper}}</p>
    <br />
    <p>今天的学习进度是{{num}}({{num|toPercentage}})</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
 data:{
 	message:'hello goodafternoon',
 },
 filters:{
 	toUpper:function(value){
 		return value.toUpperCase();
 	}
 }
}
</script>

Throd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 快速入门

最近在学习小马哥的视频课程，很简短的课程，但是内容丰富。Vue.js是一套开发Web页面的JavaScript脚本框架。要使用Vue.js，需要在html文档添加引用： <script src="https://unpkg.com/vue/dist/vue.js"> </script>新建index.html:其中，el：记载要使用的对应id的代码块；dat...
复制链接

扫一扫

专栏目录