VUE的简单使用

前言

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">

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇