番外--Vue

1.Vue.js使用文档及下载Vue.js

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看：
 https://cn.vuejs.org/v2/guide/

vue.js如果当成一个库来使用，可以通过下面地址下：
https://cn.vuejs.org/v2/guide/installation.html

vue介绍

Vue是前端三大 新框架 之一

Vue的作用

 作为一个js库，可以用它构建Web界面

Vue的特点

1 一个构建数据驱动的web界面的渐进式框架
2 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

1.导包: <script src="./js/vue.js"></script>

2.html: <div class="box">{{content}}</div>

3.使用VUE：
  window.onload = function () {
        var vm = new Vue({
            el:'.box',
            data: {
                content: 'Vue的基本使用'
            }
        });
	}

2.V-bind

1.在属性前 添加v-bind:  可以省略只写:

2. 属性的值 就可以写到vue对象里 的data中了

vue的｛{}｝语法 和flaskdjango里的模版语言冲突 可以修改为自己定义

# 3.事件的使用

添加methods

在标签中用@click使用添加好的js方法

4.if判断控制标签 是否渲染

v-if直接让标签不渲染 也就不会显示

v-show可以控制标签的display属性 是否显示标签

5.for 循环

创建js数据

6.todolist

• 1 for循环初始化数据的显示 items: ['学习Vue', '学习Django基础', '学习Django前台'],

• 2 添加点击事件

  <button @click="addItem">
  

• 3 在点击事件里 完成 输入框的获取 和 数据到列表的添加

  • 3.1

• 3.2

  

7.变量定义

• var let const
• let const 没有预解析
• const是定义常量 不能修改

console.log(num1);
var num1 = 10;

let num2 = 20;
console.log(num2);
num2 = 200;

const num3 = 30;
console.log(num3);
//num3 = 300;  常量 不能修改