vue.js的学习笔记-CSDN博客

概念：

Vue.js 是前端的主流框架之一，Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）。

框架和库的区别：

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

使用vue.js需要先导入Vue的包：
<script src="vue-2.4.0.js"></script>

基本代码格式：

<body>
//用来实现的容器
<div id="app">
    <p>{{ msg }}</p>
</div>

<script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    var vm = new Vue({
      el: '#app',       // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      data: {           // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue'
      }
    })
</script>
</body>

</html>

指令：v-cloak ：使用 v-cloak 能够解决插值表达式闪烁的问题

表达式方式的区别：
    <p v-cloak>++++++++ {{ msg }} ----------</p>
    <h4 v-text="msg">==================</h4>
v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空，上述两个案例显示到页面的效果为：
++++++++msg ----------
和
msg

指令：v-bind: 是 Vue中，提供的用于绑定属性的指令
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
v-bind:指令可以被简写为 :要绑定的属性
同时，Vue 中提供了 v-on: 事件绑定机制：
<input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')">
我们再将事件封装成一个方法：
<div id="app">
<input type="button" value="按钮" @click="show">
</div>
下面写方法：
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈</h1>',
        mytitle: '这是一个自己定义的title'
      },
      methods: {               // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })
</script>