Vue 简单介绍及入门

最新推荐文章于 2024-05-29 00:13:10 发布

DYSLzx

最新推荐文章于 2024-05-29 00:13:10 发布

阅读量429

点赞数

分类专栏： java 简单文章标签： vue java html javascript js

本文链接：https://blog.csdn.net/weixin_44154163/article/details/109683998

版权

java 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

简单

26 篇文章 0 订阅

订阅专栏

Vue 简单介绍及入门

Vue.js

Angular

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
相比于javascript更加简单易学
官网：https://cn.vuejs.org/

HelloVue

第一个Vue程序

vue.js

1：下载vue.js
https://cdn.jsdelivr.net/npm/vue/dist/vue.js

2：创建静态web项目

3：将vue.js导入项目

4：编写hello页面，引入vue.js

5：启动服务器，显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello-vue</title>
    <script src="/js/vue/vue.js"></script>
</head>
<body>

<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

Vue 常见指令

属性: vue一直解析数据的指令

{{}}

v-bind

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
v-bind: 表示通知vue在渲染的 DOM 标签时，将bind绑定的属性和 Vue 实例data中同名属性值保持一致
实例:

<!--v-bind属性绑定--->
<div id="app">
    <!--v-bind-->
    <span v-bind:title="title">看这里， 看这里</span>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          title:"瞅啥瞅~"
      }
    })
</script>
<!-- 简写的方式 -->
<div id="app">
    <!--v-bind-->
    <span :title="title">看这里， 看这里</span>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          title:"瞅啥瞅~"
      }
    })
</script>

<!-- 其他属性 -->

绑定图片：
v-bind:src    或者  :src

绑定样式：
v-bind:class  或者 :class

绑定链接：
v-bind:href   或者 :href

v-model

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
功能与v-bind类似，不过数据可同步改动
实例

<!--model双向绑定--->
<div id="app">

    <!--v-bind: 表示数据单项绑定，可以给html标签属性绑定参数，如果html属性值改变，vue中data数据值不会变动  -->
    v-bind：<input type="text" name="username" v-bind:value="username">

    <!--v-model:表示双向绑定，绑定数据功能跟v-bind是一样的， 区别在如果html属性值改变， vue的data数据也会变动-->
    v-model:<input type="text" name="username" v-model:value="username">

    <br>
    <span>{{username}}</span>

</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            username:"于老爷子"
        }
    })
</script>

v-html

{{属性}} 会原样输出数据属性，如果说数据是带有html格式的数据时，此时需要使用v-html指令
实例

<div id="app" >
    {{content}}
</div>
v-html ： 将html格式数据渲染出来
-->
<div id="app" v-html="content">
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            content:"<span style='color: red;'>这是内容</span>"
        }
    })
</script>

v-if

判断指令
实例

<!--age是否大于18，等于18，小于18-->
<div id="app">
    <span v-if="age > 18">欢迎光临</span>
    <span v-else-if="age < 18">18禁</span>
    <span v-else="age == 18">这年纪好</span>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          age:18
      }
    })
</script>

v-for

循环指令
普通数组

实例

<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
    <!--带下标-->
    <ul>
        <li v-for="(item, index) in arr">{{index}}-{{item}}</li>
    </ul>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:["a","b","c","d","d"]
      }
    })
</script>

对象集合

实例:

<div id="app">
    <ul>
        <li v-for="u in list">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          list:[
              {id:1,name:'dafei', age:18, sex:1},
              {id:2,name:'xiaofei', age:17, sex:1},
              {id:3,name:'huisiji', age:18, sex:0},
              {id:4,name:'xiaoxue', age:19, sex:0}
          ]
       }
   })
</script>

v-on

事件绑定指令，可缩写成@
比如：

v-on:click       //绑定点击事件， 
@click

Vue 事件

事件函数

<script>
    var vue = new Vue({
          el:"#app",
          data:{
              list:[
                  {id:1,name:'dafei', age:18, sex:1},
                  {id:2,name:'xiaofei', age:17, sex:1},
                  {id:3,name:'huisiji', age:18, sex:0},
                  {id:4,name:'xiaoxue', age:19, sex:0}
              ]
          },
          methods:{
              choseClick : function () {
                  alert(1);
              },
              changeSelect : function(){
                  alert(2);
              }
          }
      })
</script>

事件对象

事件信息封装对象：使用 $event 标记

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>


      methods:{
          choseClick:function (e) {
              alert(1);
          }
      }

获取事件源

被触发事件的标签元素

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>
    
      methods:{
          choseClick:function (e) {
              console.log(e.currentTarget);
          }
      }

事件传参

调用事件函数传入参数

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>


   methods:{
          choseClick:function (e, id, name) {
              console.log(e.currentTarget, id, name);
          }
      }

Vue的属性

el

用来指示vue编译器从什么地方开始解析 vue 的语法

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]
      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

data

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]
      }
    })
</script>

methods

放置页面中的业务逻辑，js函数一般都放置在methods中

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      }
    })
</script>

filters

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex | sexFilter}}
        </li>
    </ul>

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]
      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

mounted

是一个函数，在vue实例创建完成后被立即调用（html加载完成后执行
一般用处初始化data中的数据

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

vue 声明周期

在这里插入图片描述

  el:"#app",
  data:{
      arr:[1,2,3]

  },
  methods:{
      fun1:function () {
      },
      fun2:function () {
      }
  },
  filters:{
      dataFormat:function () {
      },
      sexFilter:function (sex) {
          return sex == 0? '女':'男'
      }
  }, 
  mounted:function () {
      console.log("执行数据初始化")
  }  
})

```

vue 声明周期

[外链图片转存中…(img-TQtQmSa9-1605278754528)]

DYSLzx

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue 简单介绍及入门

Vue 简单介绍及入门Vue.jsVue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。相比于javascript更加简单易学官网：https://cn.vuejs.org/HelloVue第一个Vue程序vue.js1：下载vue.jshttps://cdn.jsdelivr.net/npm/vu
复制链接

扫一扫