web前端框架VUE的结构分析以及基本用法解释
Posted 合众汇才
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端框架VUE的结构分析以及基本用法解释相关的知识，希望对你有一定的参考价值。
先说一下如何引入vue框架，这里推荐一个简单的方法
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
VUE采用了MVVM的模式，也就是 M（数据模型层）、V（视图层）、VM（调度层）
个人理解，如果有误欢迎指正！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vueTest 以及MVVM结构分析</title>
</head>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<body>
<!--视图层 V -->
<div id="page"></div>
<script>
// 调度层 VM
var vm = new Vue({
//作用域 关联了id="page"这个div下的所有内容
el:'#page',
// 用来存放数据 M
data:{
},
//用来存放方法
methods:{
}
})
</script>
</body>
</html>
基本用法
这里主要介绍几个vue常用的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id = "page">
<!-- 将值插入p标签，在低网络速度下它会显示 {{ msg }}
等加载完成才会显示携带的值-->
<p>{{ msg }}</p>
<!-- v-cloak 解决差值闪烁问题 需要和style配合使用-->
<p v-cloak>{{ msg }}</p>
<!-- 这样可以同时显示标签内所有内容 -->
<p v-cloak>=== {{ msg }} ===</p>
<!-- 注意，这里233会被msg的值覆盖 它不会出现低网络
速度下的闪烁问题-->
<p v-text="msg">233</p>
<!-- 插入html的方法 v-html -->
<div v-html='msg2'></div>
<!-- 事件绑定 v-on -->
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" v-on:mouseover=
"show">
<!-- 可以简写为 @ -->
<input type="button" value="按钮" @click="show">
</div>
<script>
var vm = new Vue({
el:'#page',
data:{
msg:'233',
msg2:'<h1>这是h1<h1>',
},
methods:{
show:function () {
alert('hellow')
}
}
})
</script>
</body>
</html>
补充一个小案例，做文字跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字跑马灯</title>
</head>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<body>
<div id="page">
<p v-text='msg'></p>
<input type="button" value="start" @click='start'>
<input type="button" value="stop" @click='stop'>
</div>
<script>
var vm = new Vue({
el:'#page',
data:{
msg:'猥琐发育，别浪～～！',
intervalID:null
},
methods:{
start() {
if (this.intervalID != null ) return;
this.intervalID = setInterval(() => {
var startStr = this.msg.substring(0,1)
var endStr = this.msg.substring(1)
this.msg = endStr + startStr
},400)
},
stop() {
clearInterval(this.intervalID)
this.intervalID = null
}
}
})
</script>
</body>
</html>
以上是关于web前端框架VUE的结构分析以及基本用法解释的主要内容，如果未能解决你的问题，请参考以下文章