Vue.js入门

最新推荐文章于 2024-07-12 16:27:40 发布

航向你的海岛

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量81

点赞数

分类专栏： javaWeb 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_43861969/article/details/118857357

版权

javaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

是什么？

Vue.js 是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

第一个实例

在这里插入图片描述
Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：<div id = "vue_det"></div>
这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

样式绑定

基本的绑定
这个实例将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
<body>
<div id="app">
  <div v-bind:class="{ 'active': isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>
</body>

动态的绑定
在这里插入图片描述
这里的v-bind:class="{‘red’: blnRed}"的v-bind省略了，也是可以的。
这个实例通过blnRed和checkbox绑定来选择是否显示红色字体。v-model会自动把输入的值赋给blnRed变量。

Vue过滤器

<body>
	<div id="app">
		<input type="text" v-model="str">
		<div>{{str|ff}}</div>
	</div>
	
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				str:''
			},
			filters:{
				ff:function(e){
					e.split('').reverse().join('');	
				}
			}
		})
	</script>
</body

这个实例实现了字符串输入后反向。
通过管道符调用ff
ff需要在filters种定义

组件

组件有全局组件和局部组件
基本定义
这里是局部组件的定义

<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				str:''
			},
			components:{
				"tgrong":{
					template:'<h3>今天天气不错</h3>'
				}
			}
		})
	</script>

调用方式：

<tgrong></tgrong>

props传值

<div id="app">
    <tgrong message="hello!"></tgrong>
</div>
<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				str:''
			},
			components:{
				"tgrong":{
					// 声明 props
					props:['message'],
					template:'<h3>{{message}}</h3>'
				}
			}
		})
	</script>

这个实例种组件将会显示hello！

属性

显示与隐藏

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
  }
})
</script>

如果seen为true则显示，否则不显示

航向你的海岛

关注

0
点赞
踩
0

收藏

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

是什么？Vue.js 是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。第一个实例Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：<div id = "vue_det"></div>这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。data 用于定义属性，实
复制链接

扫一扫