简述Vue.js

最近几年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安装,下载我们的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 非常有趣,小伙伴们和我一起深入学习吧!