【自己的整理】Vue入门使用

为什么要用vue

写这篇博客的时间，2018年4月20日。我们为什么要用vue
前端框架层出不穷的今天，选择一个较为主流同时能让自己事半功倍的框架是必不可少的，同时vue作为三大主流框架之一发展迅速，如果还没有选择好用哪个框架，那不如稍微考虑一下，只要选定一个 好好做下去就好了，即便是选angular或者react都是一样的，他们都是非常不错的前端框架。

在这想吐槽一下，angular1 用过的人但是不想再用的人站点比例有点多啊，而vue没用过但是想用的人占比蛮多的。三大前端框架之王React已经占据榜首好久了，希望vue这匹黑马接下来能把angular拉下马。。。。拉下马什么鬼-。-

最基本的使用

vue文件的远程引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

上面两个都能使用，而且速度也不错

例子1

基本的数据绑定，创建一个vue的模块并在这个模块的显示元素中绑定数据，当内存中该模块数据发生变化的时候，视图中会“即时” 更新变化
html:

    <h4>app1数据绑定</h4>
    <div id="app">{{ message }}</div><!--angular的数据绑定也用的大括号-->

js:

var app = new Vue({
    el:"#app",
    data:{
        message:"Fuck Q vue!"
    }
}); 

然后窗口就会出现：

鉴于知乎(啊呸划掉)csdn博客图片放多了审核太慢，下面的例子都不放图了

例子2绑定元素特性

vue不单单可以绑定元素的内容，也能够绑定元素的属性
html:

    <h4>app2属性绑定</h4>
    <div id="app-2">
        <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>

js:

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '页面加载于 ' + new Date().toLocaleString()
    }
})

当鼠标移动到这段文字的时候，会出现“页面家在于多少多少时间”的信息
v-bind 特性被称为指令 bind是捆绑、缠绕（A.A）的意思。而v是vue的缩写，就是这个属性被vue能够认的出来，并且和message捆绑缠绕在一起了。这样的话 我就想到了既然可以绑定属性，那么就能通过改变属性的方式制作动画。改变显示，或者其他复杂的东西
比如我们稍稍改一下 html的app2这个模块的部分
html:

    <h4>app2属性绑定</h4>
    <div id="app-2">
        <span v-bind:title="message" v-bind:style="style">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>

js部分也增加一个:

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '页面加载于 ' + new Date().toLocaleString(),
        style:"color:red;"
    }
})

这样可以直接更改app2里面的字的颜色了

例子3显示隐藏 条件开关

html:

    <h4>app3显示隐藏（条件）</h4>
    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>

js:

    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })

这个例子好像，，没啥变化 因为是控制是否出现的，如果在控制台输入：

app3.seen = false;

那么就看不见“现在你看到我了”。

例子4循环

用于通过同样的窗口展现很多数据的时候。可以使用这个方式。减少前端代码同时更为简洁
html:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

js:

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '我爱兔子' },
      { text: '我爱吃兔子' },
      { text: '吃你的头啊！' }
    ]
  }
})

真正显示的页面有3个li

例5绑定事件

html:

<h4>app5添加监听事件</h4>
    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>

js:

var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

上述例子中，添加了了一个点击事件会触发函数reverseMessage(一个翻转字符串的函数)点击按钮之后，显示的message消息会翻转

例6 数据双向绑定

在默认情况下 vue的数据是单向的，是从控制层到显示层，但是可以通过设置的方式让数据双向绑定，控制同时显示
html:

<h4>app6表单应用与数据双向绑定</h4>
    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

js:

var app6 = new Vue({
  el: '#app-6',
      data: {
        message: 'Hello Vue!'
      }
    })
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })

上面的模块中。如果输入栏里的数据发生了变化，那么内存中相应的数据以及表现层中的数据也会随之改变

例子7创建组件

html:

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

js:

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

组件要有可复用的性质，并且可以在不同的地方出现，有着同样的展示效果。这里的例子还只是一个较为初级的应用（其实是我自己还搞不太懂-。-）
如果您觉得这篇博客好的话请点赞评论喔，评论自己也能得到分数哦！