Vue.js入门

GA666666 2021-11-21 PM 694℃ 0条

Vue框架

一、Vue简介

ue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

二、Hello Vue

Vue官网地址
开发环境选择Vs Code
打开官方网站，点击起步
打开Vs code 新建一个空白的文件夹，在其中创建index.html文件
在title引入vue开发工具包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哈哈</title>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   <div id="app" class="app">
       {{message}}
       <span>{{message}}</span>
   </div>
    <script>
        var app = new Vue({
           // el:"#app",
           //el:".app",
            data:{
                message:"hello"
            }
        })
    </script>
</body>
</html>

安装Live Server插件可以在保存代码的同时自动刷新浏览器，节省开发时间
1.el挂载点
我们在hellovue 例子中使用了：#app 的id挂在点，起使我们还可以使用通过class的名字进行挂载
例如：div 的 class属性为：app，那我们在el挂载的时候使用： .app即可
还可以直接使用el：“div”
在开发时通常使用 id 来进行挂载
注意 body标签和html标签是不支持挂载的，建议使用div标签

el的作用范围是el命中元素及其内部元素

2.data:数据对象

<body>
 <div id="app" class="app">
     {{school.name}}
     <br>
     {{campus}}
     <br>
     {{campus[2]}}
 </div>
 <script>
     var app = new Vue({
         el: "#app",
         //el:".app",
         data: {
             message: "你好 Vue",
             school: {
                 name: "hah",
                 mobil: "44444"
             },
             campus: ["beijing", "shanghai", "guangzhou"]
         }
     })
 </script> 
</body>

三、基本指令

1.v-text

  < div id="app">
       <h2 v-text="message">sss</h2>
       <h2 v-text="message+'Ga666'">sss</h2>
       <h2>sss{{message}}</h2>
       <h2>sss{{message+"Ga6666"}}</h2>
   </div><div id="app">
       <h2 v-text="message">sss</h2>
       <h2>sss{{message}}</h2>
  </div>

2.v-html

<div id="app">
        <p v-text="context"></p>
        <br>
        <p v-html="context"></p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            //el:".app",
            data: {
               context:"<a href='https://www.baidu.com'>百度一下</a>"
            }
        })
    </script>

与v-text 差不多，但是可以解析html格式的文件
3.v-on
作用是：为元素绑定事件
事件名前不需要写 on
指令可以简化成 @
绑定的方法顶一在methods中
方法内部可以通过this关键字可以访问定义在data的数据
v-on:click="方法" 绑定点击事件
v-on:monseenter="方法" 绑定鼠标移入

v-on:dblclick="方法" 绑定双击事件

然后在js中写入

var app = new Vue({
  el:"#app",
  methods:{
      //逻辑代码
  }
})

将methods中的方法与组件进行绑定

<div id="app">
      <input type="button" value="点击事件" v-on:click="doIt">
</div>
  <script>
      var app = new Vue({
          el: "#app",
          //el:".app",
          methods: {
              doIt:function(){
                  alert("ga66666");
              }
          }
      })
  </script>

还可以将 v-on替换成@

<input type="button" value="点击事件"@click="doIt">

还可以实时改变数据的值

 <div id="app">
        <input type="button" value="点击事件" @click="changefood">
        <h2 @click="changefood">{{food}}</h2>
    </div>
    <script>

        var app = new Vue({
            el: "#app",
            data:{
                food:"ga666666"
            },
            methods: {
                doIt:function(){
                    alert("ga66666");
                },
                changefood:function(){
                    console.log(this.food) 
                    this.food+="帅"
                }
            }
        })
    </script>

效果如下

4.实例计数器

<div id="app">
        <input type="button" value="+" @click="changefood('plus')">
        <input type="button" value="-" @click="changefood('sub')">
        <h2 @click="changefood('plus')">{{food}}</h2>
    </div>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                food: 0
            },
            methods: {
                doIt: function () {
                    alert("ga66666");
                },
                changefood: function (str) {
                    if (str == 'plus') {
                        console.log(this.food)
                        this.food += 1
                    }else{
                        this.food -= 1
                    }

                }
            }
        })
    </script>

5.v-show

v-show指令作用：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容都会解析布尔值
true为显示，false为隐藏

<img src="pic1.jpg" v-show="true">
<img src="pic1.jpg" v-show="false">
<img src="pic1.jpg" v-show="isShow">
<img src="pic1.jpg" v-show="age>=18">
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:16
        }
    })
</script>

6.v-if

一样可以显示或隐藏组件与v-show 不同的是，v-show只是改变了组件的display属性的值，而v-if是直接操作dom，将组件移除或添加
频繁切换使用v-show，反之使用v-if，前者消耗小
```
<img src="pic1.jpg" v-if="age>=18">
```

7.v-bind

设置元素的属性（比如 src class title）

<img v-bind:src="imgsrc" v-if="isShow">
<img v-bind:title="imgsrc">
<--三元表达式-->
<img v-bind:class="isShow?'active':''">
<--对象的方式，active是否生效取决于isShow的布尔值-->
<img v-bind:class="{active:isShow}">

v-bind简写成冒号：

<img :src="imgsrc" v-if="isShow">
<img :title="imgsrc">
<--三元表达式-->
<img :class="isShow?'active':''">
<--对象的方式，active是否生效取决于isShow的布尔值-->
<img :class="{active:isShow}">

标签: none

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://ga666666.cn/index.php/archives/113/

上一篇事物的特性并描述脏读、不可重复读和幻读的现象

下一篇数据库如何规范化