django中vue的使用

转载：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

常规的vue绑定

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

9.  

12. {% verbatim %}

14. {{ message }}

{% endverbatim %}

 

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

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

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

9.  

12. {% verbatim %}

14. {{ message }}

15. {{ message }}

{% endverbatim %}

 

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

v-if  对绑定的内容判断

9.  

12. {% verbatim %}

14. {{ message }}

15. {{ message }}

{% endverbatim %}

 

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

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

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

9.  

12. {% verbatim %}

14. {{ message }}

15. {{ message }}

{% endverbatim %}

 

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

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

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

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

9.  

12. {% verbatim %}

14. {{ message }}

15. {{ p }}