最近几年vue非常火爆,非常受欢迎
即将面临毕业的我,终于决定从事前端工作,决然的着手开始学习vue
什么是Vue.js呢?
它是有助于我们前端工程师开发的一种框架
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
并且Vue 学习起来非常简单。
要想学习vue怎么入手呢?要有什么准备呢?
我目前在学习的一个vue网址http://www.runoob.com/vue2/vue-install.html 我觉得这个对于初学者来说还是不错的网站
里面的东西也挺多的!
起步呢,你需要点进链接进入网站,点击vue.js安装,下载我们的vue.js将其引入
或者直接创建文档 .html 将<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>引入到代码中
之后我们就可以动手来实现自己的vue代码啦
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习之地</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">//跟容器
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: "hello vue!"
}
})
</script>
</body>
</html>
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
实例化Vue对象:
el:element 需要获取的元素,一定是html中的跟容器元素
data:用于数据的存储 ,用于定义属性。 {{}}就是获取data里的值
除了绑定插入的文本内容,我们还可以采用这样的方式绑定 DOM 元素属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习之地</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<pre><a v-bind:href="url">vue</a></pre>
</div>
<script>
var er = new Vue({
el:'#app',
data:{
url:'http://www.runoob.com'
}
})
</script>
</body>
那么v-bind是做什么用的呢?
V-bind属性是指令,指令是带有v- 前缀的特殊属性,指令用于在表达式的值改变实施,将某些行为应用到DOM上,这段代码中的意思就是将这个元素节点的 href属性和 Vue 实例的 url属性绑定到一起。
接下来我们来试试实现数据双向绑定:
v-model
指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧
<!DOCtYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>
<h1>Hello world实例</h1>
<hr>
<div id="app">
<p>{{message}}</p>
<p><input type="text" v-model="message"/></p>//双向绑定文本
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello vue!'
}
})
</script>
</body>
</html
注意:
vue.js为我们最常见的指令提供了特别的缩写
<a v-bind:href="url"></a>----<a:href="url"></a>
<a v-on:click="dosomething"></a>----<a @click="dosomething"></a>
好啦!
就说到这里啦,vue 非常有趣,小伙伴们和我一起深入学习吧!