python和vue结合开发前端_Python--前端之路-----Vue

Vue

导入Vue

创建vue对象

加载后执行：

绑定：var vm= new Vue({ el:"#标签的id，此处类似于选择器", 属性，方法 })

属性：data：{属性1："值1", 属性2：值2，属性：true}

方法：methods：{ 方法名1: function (){执行内容}，方法名2: function(){执行内容} }

监听：watch：{属性名：function(){ 监听vue属性的数据变化，属性发生修改执行的内容}，... }

计算型属性：computed：{属性名：function(){属性计算，可以使用js内置方法，return 计算后的属性}}，引用使用时和普通属性一样，{{属性名}}

自定义指令：directives：{  指令名:{ 发生时态:function(el){el.属性操作，el代表当前原生js对象}，发生时态2:function(el){...}}}，详见下面内容

js内使用

通过vue对象名.属性，vue.方法

本对象内使用当前对象属性：this.属性

使用   :标签内容.属性

设置标签内容

{{属性名}}  

设置标签属性

如：

简写：

设置多个标签属性值

html模板替换

属性：在需要替换的位置，使用{{直接使用Vue对象的属性名即可}}，如{{属性1}}

方法：在使用的位置，使用{{方法名}}，如{{方法1}}

更多

支持js对象内置的方法 {{属性.内置方法().内置方法() }}

支持数学运算，{{属性1+属性2}}

支持三目运算，{{条件 ？'条件成立内容' ：'条件不成立内容' }}

使用：@事件监听

按钮

Vue对象中方法内，添加事件要执行的方法

简写：按钮

更多：事件内可以直接使用原生JS代码，@click='原生代码'

标签内容使用属性值，事件修改属性值，事件发生后，属性值被修改，页面值会被立马刷新

事件内可以直接内嵌js语句，比如vue属性的加减运算，@click='num+=1'

使用：设置标签样式

创建样式：在Vue对象中，添加属性，属性值为字典类型，存储样式的数据

设置样式：

三种方式切换标签样式

创建样式，通过选择器设置标签样式

使用Vue修改标签关联样式的属性值

1.使用js对象控制标签形式

通过true与flase来开启或关闭

2.使用三目运算符来控制标签样式

取消，值设置为“”即可

3.使用事件来切换样式

定义执行方法，对属性进行切换，如开启与关闭，方法内 vue对象.属性 = !vue对象,属性

按钮

选项卡案例

对按钮添加事件，:对应类使用三目运算符进行判断实时修改

:内容标签的样式绑定的类，进行三目运算进行实时更新

vue监听

监听vue属性的数据变化

添加watch：{属性名：function(){属性发生修改执行的内容} }

条件语句，控制显示

内容

  条件成立，显示页面内容

内容

内容

内容

循环语句，遍历展示

列表遍历

•   {{临时变量}}    

•   {{临时变量.字典键名}}--{{临时变量.另一个字典键名}}    

自定义js对象遍历

•   {{临时变量}}    

取索引

•     {{临时变量.字典键名}}--{{临时变量.另一个字典键名}}--{{index}}    

•   {{key}}，{{value}}，{{index}}    

vue2.0版本：建议对遍历的标签设置 :key="唯一值"

• 示例图片

  事件修饰符，阻止冒泡与默认行为

  阻止事件冒泡@click.stop="事件方法"

  阻止默认行为@click.pervent="事件方法"

  阻止默认行为和事件冒泡@click.pervent.stop="事件方法"

  事件方法可以省略：按钮

  示例图片

  表单(数据)绑定

  绑定vue属性和表单内容 v-model="vue属性"

  vue属性变化会更新到表单中，同时表单中的内容变换也会同步到vue中

  绑定输入框

  绑定单选框

  选项1：

  选项2：

  绑定复选框

  选项1：

  选项2：

  绑定下拉框

  选项一

  选项二

  选项三

  绑定多行输入框

  数组(列表)或字符串内写入value值，表示默认

  示例图片

  综合案例-聊天对话框

  示例图片一

  示例图片二

  自定义过滤器

  加载后执行,需要在vue对象创建前构造

  Vue.filter('过滤器名字'，function(value) {对形参进行修改，返回过滤后的数据}   )

  示例图片

  自定义指令

  自定义局部指令，只能再当前vue对象绑定的标签中使用

  在vue对象中：directives：{  指令名:{ 发生时刻:function(el){el.属性操作，el代表当前原生js对象}，发生时刻2:function(el){...}}}

  自定义全局指令，可以全局vue对象中使用

  页面加载后执行，在vue对象创建前进行构建

  Vue.directives('自定义指令名'，{"触发时刻"：function(el) { el表示当前标签的原生对象，可以进行操作 }})

  使用时，指令名前加v-，即v-自定义指令名，

  inserted：模板渲染加载完后执行指令(页面第一次加载后)

  componentUpdated：组件更新后执行指令(数据更新)

  钩子监听

  示例图片

  axios进行ajax请求

  示例图片

  生命周期

  数据请求

  Get

  Post

  json

  form

  ES6语法