重新开始认识前端之vue.js（一）

2021-04-02 11:27

阅读：483

标签：show 文本 port body 滚动网速问题 scale tin

断更了很长时间，最近有时间开始前端vue学习，vue这种VM的中间体，结合es6，适合现在代码快速开发。

前期主要做了几个案例，主要用到的vue组件：v-bind缩略写法为：（缩写为冒号）v-bind 主要用于属性绑定， v-on缩写为@ v-on大多数用在绑定事件。

v-text用于操作纯文本，替代显示对应的数据对象上的值，容易发生覆盖。v-cloak不会发生覆盖，但有闪烁。

p v-cloak>{{ msg }}p>

h4 v-text = "msg">h4>

用v-cloak解决插值表达式闪烁问题闪烁问题具体是：js文件在网速慢的时候加载时候变量值不能获取，造成先显示{{内容}}类似这种，之后显示具体变量的值。

默认V—text是没有闪烁问题的但是会覆盖

input id="btn" type="button" value="button" :title="mytitle+‘123‘" >

vm对象实例的基本格式如下：

var vm =new Vue({

el:‘#app‘,

data :{

msg:‘欢迎需学习vue‘,

mytitle:‘这是标题‘

methods :{

show(){

alert(‘hello‘)

}

})

基本的格式就是这样子的，但是实际和以前的js大相径庭，逻辑写法稍微简单点。

以下代码是一个跑马灯的实例,可以直接用来调试，但是请认准vs code编程软件：

DOCTYPE html>

html lang="en">

head>

meta charset="UTF-8">

meta name="viewport" content="width=device-width, initial-scale=1.0">

title>Documenttitle>

script src="vue.js">script>

head>

body>

div id="app">

h4>{{ msg }}h4>

input type="button" value="低调" @click="stop">

input type="button" value="浪起来" @click="lang">

div>

script>

//在vm实例中如果想要获取data里的数据，或者想要调用methods中的方法，

//必须通过this.数据属性名或者 this.方法名来访问，这里的this就表示new Vue实例

var vm = new Vue({

el:‘#app‘,

data:{

msg:‘这是一个滚动条‘,

setIntervalid:null

methods:{

lang () {

if(this.setIntervalid != null) return;

//this指向性问题得用一个变量代替

this.setIntervalid = setInterval( ()=>{

//获取字符串头第一个字符

var start = this.msg.substring(0,1)

//获取字符串除第一个字符其他的字符

var end = this.msg.substring(1)

//重新拼接得到新的字符串并赋值给this.msg

this.msg = end+start

},400)

stop () {//停止计时器

clearInterval(this.setIntervalid)

//每当清除了定时器，重新把setIntervalid置位null

this.setIntervalid = null

}

})

script>

body>

html>

重新开始认识前端之vue.js（一）

标签：show 文本 port body 滚动网速问题 scale tin

原文地址：https://www.cnblogs.com/zjj123456/p/12554498.html

上一篇：2019年Web前端开发职业技能等级考试试题~高级理论考试真题（一）

下一篇：2019年Web前端开发职业技能等级考试试题~中级理论考试真题（二）

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：重新开始认识前端之vue.js（一）
文章链接：http://soscw.com/index.php/essay/71359.html

亲，登录后才可以留言！

重新开始认识前端之vue.js（一）

评论

热门文章

推荐文章

最新文章

置顶文章