如何认识Vue和学习Vue

认识Vue

vue.js是目前最火的前端框架，vue是前端的主流框架之一,和angular、React一起，并称前端三大主流框架。

Vue是一套用于构建用户界面的渐进式JavaScript框架。

Vue的官网：https://cn.vuejs.org/index.html

安装Vue

Vue的安装首先下载vue.js文件，然后在html中通过script标签导入

<script src="js/vue-2.6.13-min.js"></script>
<script src="文件路径"></script>

还有一种安装方式是采用在线的网络地址，但是使用这种方式电脑必须连网，如果没有连接网络的话，地址就请求不到，vue的文件也不能使用。

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

Vue的实例创建

<script src="js/vue-2.6.13-min.js"></script>
<div id="app"></div>
<script>
   const app=new Vue({
       el:"#app",
       data:{
                age:20
            }
     })
</script>

模板语法

1.  插值

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

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

1.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>

1.3 Mustache(双花括号) 语法不能作用在 HTML标签的属性上，遇到这种情况应该使用  v-bind指令

<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元素中

1.4 使用JavaScript表达式

<div class="main">
        <!--
            v-bind：对属性进行绑定
            简写   ：
        -->
    <img :src="imgSrc" alt="">
    <input type="text" :placeholder="mes">
    <div>未使用js表达式前：{{strRev}}</div>
    <div>未使用js表达式后：{{strRev.split("").reverse().join("")}}</div>
    </div>
    <script>
        const app=new Vue({
            el:".main",
            data:{
                mes:'请输入用户名',
                strRev:"Holle World",
                imgSrc:"./1.jpg"
            }
        })
    </script>

2.  指令

 vue框架中的指令是带有 v- 前缀的特殊属性

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

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

3.  v-bind 用于属性绑定     简写形式为  ：

4.  v-on 事件绑定    简写形式为   @

5.  v-model 双向数据绑定

3.  vue指令缩写

1.  v-on缩写

     v-on：事件名称     缩写之后   @事件名称

     v-on：事件类型.修饰符="方法名称()"

简写前
<button v-on:click="surprise()">点击有惊喜</button>

简写后
<button @:click="surprise()">点击有惊喜</button>

2.  v-bind缩写

     v-bind：属性名称    缩写之后    ：属性名称

简写前
<input type="text" v-bind:placeholder="mes">

简写后
<input type="text" :placeholder="mes">