文章目录
前言
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提供了大量能使我们快速便捷地处理数据的函数和方法。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
