Vue初学习(一)

举报
Ljfy 发表于 2020/08/09 17:26:41 2020/08/09
【摘要】 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

一、声明式渲染

<div id="app">
{{ message }}
</div>
<script>
let app = new Vue({ //创建Vue实例
    el:"#app",//选择器
    data:{ //初始化数据
      message:"hello world"
    }
})
</script>

输出hello world 。

Vue所有东西都是响应式的,打开控制台输入app.message="Vue"可以看到相应的更新。


理解Vue中`MVVM`


MVVM:

  • Model:模型、数据对象(data)

  • View:视图,模板页面

  • viewModel:视图模型(Vue的实例)

二、模板语法

插值表达式:{{...}}

功能是向页面渲染数据

<div id="app">
    {{ msg }}
</div>
<script>
let app = new Vue({
   el:"#app",
   data:{
      msg:"你好!"
    }
});
</script>

使用JavaScript表达式

{{ number + 1}}
{{ ok ? 'YES' :'NO'}}
{{ message.split('').reverse().join('')}}

有个限制,每个绑定都只能包含单个表达式

<!--这是语句,不是表达式-->
{{var a = 1}}
<!--流程控制也不会生效,应该使用三元表达式-->
{{ if(ok) {return message}}}

v-htmlv-text

  • v-htmlinnerHtml 可以解析html 存在安全性问题

  • v-text:textContent 不能解析HTML

 <div id="app">
    <p v-text="html"></p>
    <p v-html="html"></p>
  </div>

<script>
    let app = new Vue({
      el"#app",
      data: {
        html" <span>html解析</sapn>!"
      },

    })
  
</script>

三、强制数据绑定

  • v-bind是Vue中,提供的用于绑定属性的指令。

  • v-bind可以写合法的js表达式

  • v-bind可以简写为:

<img v-bind:src="imgUrl">
data:{
imgUrl="https://cdn.pixabay.com/photo/2020/08/01/10/04/alpine-5455013_960_720.jpg"
}

四、绑定事件

  • 在html属性上加上v-on事件属性值,就可以实现Vue的方法监听

  • 可以简写为@

  • vue中事件

<button @click="handle"></button>
<script>
 let app = new Vue({
      el"#app",
      methods: {
          //methods 定义了当前Vue实例所有可用的方法
        handle() {
          alert('click');
        }
      }
    })
 
</script>

小案例:文字滚动效果

分析:

1、每次点击按钮,获取msg字符串,在使用substring进行截取操作,放到最后一个位置

2、实现文字连续滚动,需要添加定时器

第一步:每次点击按钮,字符串就滚动一次

handelClick:function(){
    // 取第一个字符
    let startStr = this.msg.subString(0,1);
    // 获取剩下的字符
    let endStr = this.msg.subString(1);
    //拼接新的字符 赋值给msg
    this.msg = endStr + startStr
}

第二步:添加定时器

handelClick:function(){
    setInterval(function(){
    let _this = this;
     // 取第一个字符
    let startStr = _this.msg.subString(0,1);
    // 获取剩下的字符
    let endStr = _this.msg.subString(1);
    //拼接新的字符 赋值给msg
    _this.msg = endStr + startStr
    },100)
}

定时器会存在this指向问题,this指向的是window,因此需要保存一份thislet _this = this

还可以使用箭头函数,解决this指向问题。

handelClick:function(){
     setInterval(() =>{
     // 取第一个字符
    let startStr = this.msg.subString(0,1);
    // 获取剩下的字符
    let endStr = this.msg.subString(1);
    //拼接新的字符 赋值给msg
    this.msg = endStr + startStr
    },100)
}

第三步:设置停止按钮(停止定时器)

把定时器赋值给intervarID,然后在data里传入一个null,在data里可以再全局访问到

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>

  
</style>
</head>

<body>
  <div id="app">
    <input type="button" value="开始" @click="handelClick">

    <input type="button" value="结束" @click="stop">
    <p>{{ msg }}</p>
  </div>
  <script>
    let app = new Vue({
      el"#app",
      data: {
           msg"公告:八月七号是立秋!",           intervnull
      },
      methods: {
        handelClick() {
        
          if (this.interv != nullreturn;
          this.interv = setInterval(() => {

            //获取第一个字符
            var strat = this.msg.substring(01)
            //获取到后面所有字符
            var end = this.msg.substring(1)
            //重新拼接新的字符串,并赋值给this.msg
            this.msg = end + strat
            // app 实例,会监听自己身上data中所有数据的改变,只要数据一发生变化,就会自动把最新的数据 从data同步到页面中。
          }, 300)


        },
        stop() {
          clearInterval(this.interv)
            //每当清除了定时器之后需要重新把interv设置为null
          this.interv = null;

        }

      }
    })

  
</script>
</body>
</html>

在Vue中,如果要获取data里的数据、methods里面的方法,都要通过this来访问。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。