Vue笔记

一、Vue入门

vue.js是目前最火的前端框架，React是最流行的一个前端框架(React除了开发网站，还可以开发手机App),Vue语法也可以用于进行手机App的开发，需要借助于Weex)
vue是前端的主流框架之一,和angular、React一起，并称前端三大主流框架。
Vue是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官网：https://cn.vuejs.org/index.html
手册：https://www.kancloud.cn/neoman/ui/556463
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

二、Vue安装

首先下载vue.js文件，然后通过script标签将其导入

<script src="js/vue-2.6.12-min.js"></script>

cdn安装

采用在线的网络地址，但是这种方式存在一个弊端那就是电脑必须连接外网，如果没有外网网络地
址也就请求不到，vue文件也就不能使用了

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

三、实例创建

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">
</script>
<div id="app">{{msg}}</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      msg:'this is a message'
   }
 })
  </script>

四、模板语法

插值

1. 数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值：

<span>Message: {{ msg }}</span>

2. 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用  v-
html 指令：

<p>双花括号绑定: {{ rawHtml }}</p>
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      msg:'<span style="color:red">this is a message</span>'
   }
 })
</script>

3. 属性绑定

<div id="app">
  <div v-bind:id="myid"></div>
  <button v-bind:disabled="isDisabled">注册</button>
  <input type="text" :value="val" @input="">
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      myid:'test',
      isDisabled:false,
      val:''
   }
 })
</script>

如果  isButtonDisabled的值是null 、undefined 或  false ，则disabled属性甚至
不会被包含在渲染出来的 button 元素中

4. 使用JavaScript表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

注意：在使用js表达式时，每个绑定的值都只能是单个表达式，语句、及流程控制、函数等是不会生效的，下边的例子则不会生效

五、指令

1. v-text 普通文本数据绑定

2. v-html 绑定的数据可以解析其中的html代码

3. v-bind 用于属性绑定

4. v-on 事件绑定

5. v-model 双向数据绑定

六、缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标
签添加动态行为 (dynamic behavior) 时， v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page
application) 时， v- 前缀也变得没那么重要了。因此，Vue 为  v-bind 和  v-on 这两个最常用的指令，提供了特定简写：

1. v-bind缩写

v-bind:属性名称 缩写后 :属性名称

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

2. v-on缩写

v-on:事件名称 缩写后 @事件名称

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>