转载：https://blog.csdn.net/qq_21389693/article/details/105734696

 

后端使用vue的目的?

后端使用vue的目的就是把ajax里面的数据绑定到前端，实现动静分离。

Vue绑定被分为两个部分

HTML部分：就是要绑定位置，通常用vue的语法来定义绑定的变量。

Django和vue默认都用{{  }}作为变量的标识，在django是有冲突的，所以要使用 verbatim标签进行转义。

Js部分：js部分是vue变量声明的部分，vue变量声明的规则很明确，

  1. 实例化一个vue对象
  2. 使用el来指定要绑定的标签，选择器遵循jq
  3. 使用data来指定具体的变量内容
  4. Vue可以绑定字符也可以绑定函数，绑定函数的关键字是method
  5. Vue 本身不支持ajax异步请求，所以，我们通常要使用vue的扩展插件vue-resource,但是二者语法一样，vue-resource目前交给三方团队维护。又有人开始推崇axios框架进行异步的mvvm数据绑定。

使用vue的需要先引入jq和vue

<script src="/static/loginapp/js/jquery-3.1.1.min.js"></script>
<script src="/static/loginapp/js/vue.min.js"></script>

常规的vue绑定

v-model 双向绑定，是vue绑定的一大特色。

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Title</title>

  6. <script src="/static/loginapp/js/jquery-3.1.1.min.js"></script>

  7. <script src="/static/loginapp/js/vue.min.js"></script>

  8. <script src="/static/loginapp/js/vue-resource.js"></script>

  9.  

  10. </head>

  11. <body>

  12. {% verbatim %}

  13. <div id="app">

  14. {{ message }}

  15. <p><input type="text" v-model="message"></p>

  16. </div>

  17. {% endverbatim %}

  18. <script>

  19. var Vue=new Vue({

  20. el:"#app",

  21. data:{

  22. message:"hello world",

  23. }

  24. })

  25.  

  26. </script>

  27.  

  28. </body>

  29. </html>

因为vue和django模板语法相似，接收参数都要使用{{ }}，所有需要加一层{% verbatim %}{% endverbatim %}，双向绑定可以让html接收vue传来的参数，也可以让html页面上更改vue的参数。

在输入框输入值，输入框上面的值也会更改，如下：

v-bind 绑定数据的属性，在工作当中相当频繁的绑定。

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Title</title>

  6. <script src="/static/loginapp/js/jquery-3.1.1.min.js"></script>

  7. <script src="/static/loginapp/js/vue.min.js"></script>

  8. <script src="/static/loginapp/js/vue-resource.js"></script>

  9.  

  10. </head>

  11. <body>

  12. {% verbatim %}

  13. <div id="app">

  14. {{ message }}

  15. <p v-bind:class="color" v-bind:id="id1">{{ message }}</p>

  16. </div>

  17. {% endverbatim %}

  18. <script>

  19. var Vue=new Vue({

  20. el:"#app",

  21. data:{

  22. message:"hello world",

  23. color:"red",

  24. id1:"id2",

  25. }

  26. })

  27.  

  28. </script>

  29.  

  30. </body>

  31. </html>

可以在vue里修改页面上被绑定元素的值。

v-if  对绑定的内容判断

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Title</title>

  6. <script src="/static/loginapp/js/jquery-3.1.1.min.js"></script>

  7. <script src="/static/loginapp/js/vue.min.js"></script>

  8. <script src="/static/loginapp/js/vue-resource.js"></script>

  9.  

  10. </head>

  11. <body>

  12. {% verbatim %}

  13. <div id="app">

  14. {{ message }}

  15. <p v-if="valid">{{ message }}</p>

  16. </div>

  17. {% endverbatim %}

  18. <script>

  19. var Vue=new Vue({

  20. el:"#app",

  21. data:{

  22. message:"hello world",

  23. valid:1,

  24. }

  25. })

  26.  

  27. </script>

  28.  

  29. </body>

  30. </html>

当valid为0的时候，删除p标签，

当valid为1的时候加上p标签。

v-show决定是否将内容展示出来

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Title</title>

  6. <script src="/static/loginapp/js/jquery-3.1.1.min.js"></script>

  7. <script src="/static/loginapp/js/vue.min.js"></script>

  8. <script src="/static/loginapp/js/vue-resource.js"></script>

  9.  

  10. </head>

  11. <body>

  12. {% verbatim %}

  13. <div id="app">

  14. {{ message }}

  15. <p v-show="valid">{{ message }}</p>

  16. </div>

  17. {% endverbatim %}

  18. <script>

  19. var Vue=new Vue({

  20. el:"#app",

  21. data:{

  22. message:"hello world",

  23. valid:0,

  24. }

  25. })

  26.  

  27. </script>

  28.  

  29. </body>

  30. </html>

当valid为0的时候，就隐藏标签中的内容 

当valid为1的时候，就显示标签中的内容 

v-show和v-if的区别：if着重是否添加元素，show着重是否显示。修改HTML的display的样式来控制是否显示。

v-for 对绑定的内容进行循环

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Title</title>

  6. <script src="/static/loginapp/js/jquery-3.1.1.min.js"></script>

  7. <script src="/static/loginapp/js/vue.min.js"></script>

  8. <script src="/static/loginapp/js/vue-resource.js"></script>

  9.  

  10. </head>

  11. <body>

  12. {% verbatim %}

  13. <div id="app">

  14. {{ message }}

  15. <p v-for="p in content">{{ p }}</p>

  16. </div>

  17. {% endverbatim %}

  18. <script>

  19. var Vue=new Vue({

  20. el:"#app",

  21. data:{

  22. message:"hello world",

  23. content:["红旗谱","三体","资本论","活着"],

  24. }

  25. })

  26.  

  27. </script>

  28.  

  29. </body>

  30. </html>

结果如下 

v-on 绑定事件

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Title</title>

  6. <script src="/static/loginapp/js/jquery-3.1.1.min.js"></script>

  7. <script src="/static/loginapp/js/vue.min.js"></script>

  8. <script src="/static/loginapp/js/vue-resource.js"></script>

  9.  

  10. </head>

  11. <body>

  12. {% verbatim %}

  13. <div id="app">

  14. <p v-on:click="Onload">{{ message }}</p>

  15. </div>

  16. {% endverbatim %}

  17. <script>

  18. var Vue=new Vue({

  19. el:"#app",

  20. data:{

  21. message:"点击我会触发事件",

  22. },

  23. methods:{

  24. Onload:function () {

  25. alert("你好，世界！")

  26. }

  27. },

  28. })

  29.  

  30. </script>

  31.  

  32. </body>

  33. </html>

当点击message的时候触发alert事件 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue