Django 模板语法 一.模板 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法 模板语法变量:{{ }} 在Django模板中遍历复杂数据结构的关键是句点字符 .(其实就是点号) views.py from django.shortcuts import render def index(request): name = "Hello world!" number = 101 lst = [1, 2, 3, 4, 5] dic = {&quo…
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!-- 以下说绑定的值都可以写成js表达式形式 --> <!-- {{}}: 双大括弧语法 --> <!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) --> <p> first: {{firstName}}<br> last: {{las…
在菜鸟教程上面学习的vue.js.同时结合vue中文文档网站,便于自己记录. vueAPI网站:API 1. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. <!DOCTYPE html> <html> <hea…
最近又重新看vue的文档了,计划是别人写的,之前看过一次,没有考虑太多,只考虑看懂能用就好.看完之后写过写demo,现在是零实际项目经验的,所以这一次打算细看,算是官方文档的二次产物吧,但是不是全部直接复制粘贴那种,中间加了些个人见解(或许是误解)下去,写出来也好让别人指正自己.  vue实例 目标: 1.学会创建vue实例 2.掌握vue数据是如何响应的 3.了解vue实例的属性和方法 4.理解vue实例的生命周期中各种钩子的用法,牢记生命周期图 前置条件:  引入了vue.js Vue实例…
本文为博主原创,未经允许不得转载: 之前自学了vue,在项目中应用了vue,由于是第一次使用,感觉非常强大,使用也非常方便,趁有时间,总结一下vue学习过程中 各个指令的使用方法,只要掌握了vue的指令,就能熟练使用vue. 以下为HTML模板{{ }}的使用方法: <!DOCTYPE html> <html lang="zh"> <head> <script src="https://unpkg.com/vue@2.5.13/dis…
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和php的include一样, 也就是把页面分成几个部分(或文件). 组件就是把页面分成几块,每一块就是一个组件,组件使用起来就是引入,声明,使用. 很通俗的说,组件的使用就是自定义html标签的使用. 组件的注册(定义) 1.全局组件 // (组件名, 配置) Vue.component('cpn-na…
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令, 这个指令可以直接把一个数据绑定到表单元素中的value,checked,selected特性,同时这些特性也会被忽略掉初始值,而总是将vue实例的数据作为数据来源. 使用了v-model之后<textarea></textarea>之间的插值就不会有效了,会被v-model代替.…
Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style绑定的多种方式 绑定class和style都是使用v-bind也就是: 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组. class和:class是共存的 绑定示例 1.class对象绑定 <!-- 根据isActivity的真假,判断是否应用activity这个class…
一.理解MVC和MVVM的关系: MVC:Model View Controller (模型 视图 控制器) 分别为:业务逻辑.界面.用来调度View和Model层 MVVM:Model View ViewModel M:每个页面中单独的数据: V:每个页面中的HTML机构: VM:调度者,V从VM中获取数据,实现数据的双向绑定! 二.VUE代码实现MVVM: 前期为了理解VUE.JS,先采用引入的方式进行VUE的操作: 三.部分vue指令: 1.v-cloak:能解决插值表达式{{  }} 闪…
事件处理 目标: 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符 理解在html中监听事件的意义 监听事件(v-on) 类似普通的on,例如v-on:click或@click就相当于普通的onclick, v-on调用的是vue实例methods里面的方法. v-on不只可以调用methods的方法, 也可以执行一些js表达式 传入特殊变量$event就可以访问到元素的DOM事件 事件修饰符 修饰符 .stop // 阻止事件传播 .prevent // 阻止默认行为 .captur…