前言
vue是一个前端渐进式框架,用其开发的前端组件很方便项目后期的管理,本人也处于学习的阶段,主要是利用完成前后端数据的交互以及前端数据的双向绑定,因此本文并不包括vue前端组件的开发。
一、引入vue
本质上来说vue是一个javascript文件,你可以从从网上下载vue的源码保存为vue.js文件,然后放在web项目中存放js文件的目录下。也可以通过cdn加速,外部引入vue.js,但是受自身网络条件的影响。我为了方便采用后一种方式,不过更推荐第一种方式。
外部引入vue(示例):
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
二、vue的简单使用
1.创建vue对象
vue对象的创建(从简单使用方向考虑)是在html文件的==script==里面。
新建vue对象(示例):
<script>
var vm = new Vue({
el:"#test",
data:{
sentence1:"",
sentence2:"",
answer: 0
},
methods:{}
})
</script>
一个vue对象主要包含三个部分:
el:相当于这个vue对象的id,即#+id名,id名自己设置即可。
data:vue对象的内部数据,数据的定义有点类似python中字典的格式。
methods:编写函数的地方,比如鼠标点击事件,钩子函数等
2.关于vue的生效范围
vue中的参数el其实是与DOM中的id对应的,也就是说你要将前端组件(div标签,table标签等)中的id值设置成与el参数中#后面的值相同才能起作用。因此你需要考虑vue的生效范围,对应选择合适的标签。另外,经过测试body标签是不起作用的。
简单完整代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>name : {{name}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
name: "御坂美琴",
},
methods: {
}
}
})
</script>
</body>
</html>
从上例中我们可以看出,要想在前端界面中访问vue中的data数据,语法为
{{参数名}},因此访问还是比较简单的。
但是flask运用的是jinja2模板,与vue的语法发生冲突(jinja2也是{{参数名}}来访问访问数据),可能导致无法正常显示。解决的办法有多种,比如修改jinja2语法或者是修改vue的语法。最直接的一种方法是,访问vue的数据时套上{%raw%}{%endraw%}。
示例:
{%raw%}
{{name}}
{%endraw%}
3.vue的简单语法
3.1条件判断的v-if
v-if的简单代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">御坂美琴</p>
<p v-else="seen">白井黑子</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
</body>
</html>
3.2 循环语句v-for
简单遍历:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="lv in railgun">
{{ lv.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
railgun: [
{ name: '御坂美琴' },
{ name: '白井黑子' }
]
}
})
</script>
</body>
</html>
遍历对象:
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '御坂美琴',
level: 5,
skill: '超电磁炮'
}
}
})
</script>
带索引的遍历:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '御坂美琴',
level: 5,
skill: '超电磁炮'
}
}
})
</script>
</body>
</html>
3.3v-model的表单数据双向绑定
<div id="app">
<p>input 元素:</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>
<div>
3.4其他
vue还有其他重要语法重要语法:事件绑定的v-on(或是@),样式绑定v-bind,还有v-show来控制组件是否显示,watch属性完成监听等。
4 vue的异步通信
熟悉jquery的知到,jquery使用ajax完成异步通信,vue也有与之类似的语法axios,原理与ajax相似。
axios示例:
testInfo:function(){
var obj=this;
obj.show=1;
obj.time=document.getElementById('input-35').value;
obj.number=document.getElementById('input-36').value;
axios.get('/testInfo?time='+obj.time+'&'+'number='+obj.number).then(function(response){
var data=response.data;
swal("Success","信息提交成功,可以开始录入题目了","success")
obj.number=data['number']
window.location.href='/testIn';
})
}
这里给出了一个简单的例子,编写的函数需要放在vue对象的methods属性里面。
5.在vue对象外部调用data参数
有时候我们在编写js代码时可能需要在vue对象的外部调用vue的data参数,这是可以实现的。
vue代码如下:
var app = new Vue({
el:'#app', //选择器
data:{
msg:'hello',
show:true
})}
这里我定义了一个简单的vue对象==app==,如果我需要在vue的外部修改==show==的值,可以通过以下语法实现:
app.$data.show=true
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">