vue学习笔记第一天

最新推荐文章于 2024-08-07 20:34:45 发布

杨澄

最新推荐文章于 2024-08-07 20:34:45 发布

阅读量465

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/richard_m_yang/article/details/88922562

Vue 专栏收录该内容

2 篇文章

订阅专栏

Vue 是一套用于构建用户界面的渐进式框架，具有其数据双向绑定和组件化开发的特点。 Vue 已经有了很多的设计优美的UI库可供调用,让后端程序员也能方便地搭建简易的前端页面。我早就安装了nodeJS 和 npm 工具，所以直接安装脚手架就可以。

#首先安装官方脚手架构建工具
$cnpm install vue-cli

#创建基于webpack模板的新项目
$vue init webpack my-project-name

#热启动，改动代码可以立即看到页面的更改。
$cnpm run dev

组件通信

作为一个非专业前端，我比较关心数据这一部分，Vue中父子组件通信需要子组件先声明一个这样的 Props ,然后父组件传递进去，这里有显式指定数据类型如 Array, Number 等，像这样

#子组件
export default{
	props:{
		propName:{
			type: Array,
			default: []
		}
	}
}
#父组件
<child v-bind:propName="dataName">

一个组件本身可以含有数据，用户对组件的操作可以更改这些数据，而组件本身的显示效果又依赖于这些数据，这就形成了一个简易的MVC模型。
组件本身的data是私有的，可读可写，而props里的数据都是从父组件里获得，或者是通过ajax请求从后端那里得到的，只能读。比如说一个轮播图，需要有一个 nowIndex 记录当前被激活的图片，这个数据就应该放在data中，而图片的地址和标题这些信息应该从父组件中传递过来。

前端路由

vue通过不同的路由转到不同的组件（页面)，有时URL中当然会有参数，而且vue采用的是严格匹配，比如/hello 就不会匹配到下面的路径。

Vue.use(Router)
export default new Router({
	routers:[
		{
		path :'/hello/:name'
		component: HelloWorld

		}
	]
})

在html template中获取router参数

<html>
<h1>{{ msg }}, {{ $route.params.name }} </h1>
</html>

在script中获取router参数

alertParam(){
      this.msg = this.$route.params['name']
	}

其他

vue里关于各种列表渲染，动态绑定等网上都说明得很详细，这里主要记录一些比较生涩当经常要用到的的语法，方便下次查阅。

父组件传递数据并动态绑定， 其中list来自于父组件的data(),color来自data
<div v-for="item in list" v-bind:color="item.color"> 循环渲染

<a v-bind:class="['classA', {'red-font': hasError}]"> 绑定多个类

<div :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]">绑定了两个类，一个是基于逻辑的动态绑定，一个是基于变量的动态绑定