Vue.js

Vue.js

Vue.js包源码网址：

src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”

<div id="app">
        <p>{{msg}}</p>
        <p>{{list}}</p>
        <p>{{flage}}</p>
        <!--可以进行三目运算-->
        <p>{{flage?"111":"hello woeld"}}</p>
        <!--可以进行数学运算-->
        <p>{{num+1*10/2}}</p>
        <!--可以操作函数，不建议使用-->
        <p>{{msg.split("").reverse().join("")}}</p>
    </div>

常见的JS库有：

WeUI，jQuery，bootstrap，Amaze UI,Zepto,Echarts.js

常见的JS框架有：

Vue.js， React.js，Angular.js

mve modle view control vue mvvm modle viewmodel

1.省去了dom操作

2.数据驱动视图，视图也可以改变数据，mvvm

var vm = new Vue({

    el:"#app", //document.getEelmentById("app") 挂在一个节点

    data:{

      msg:"hello world",

      list:["张三","李四","王五"],

      text:"",

      flage:true,

      num:1,

    }

  });

样式Css

<style>
    div{
        height: 200px;
        width: 400px;
        background-color: green;
    }
    .tag{
        color: red;
    }
    .yello{
        color: yellow;
    }
</style>

HTML页面

<div id="app">
        <p :class="flage?'red':'yello'">{{msg}}</p>
        <a :href="url">百度</a>
        <button @click="toggly()">切换样式</button>
    </div>

<!-- <div id="app">
    <p>{{msg}}</p>
    <div @click="fn()"></div>
    <div @click="fn1()"></div>
</div> -->

Vue指令

v-on:click=“fn()” 绑定事件 ->语法糖：@click=“fn()”

v-bind ：class动态绑定 ->语法糖：：class="" :href :src 可以是src cjass style title 其他属性

实例示范1

var vm = new Vue({

    el: "#app", 

    data: {

      msg: "hello world",

      list: ["张三", "李四", "王五"],

      tag:"yello",

      flage: true,

      url:"http://www.baidu.com"

    },

 methods: {

      toggly() {

        //console.log(this)

        this.msg="修改了";

        this.flage=!this.flage;

      }
  } 
  });

实例示范2

var vm = new Vue({

    el: "#app", 
    data: {

      msg: "hello world",

      list: ["张三", "李四", "王五"],

      tag:"yello",

      flage: true,

      url:"http://www.baidu.com"

    },

  methods: {

      fn() {

        alert("hello world");

      }, //function fn(){} ->es6 fn(){}

      fn1() {

        alert("fn1()");

      }

    }

  });

es6

console.log(a); //var a = undefiend

  var a ="111";

  var a ="11111";

  console.log(a);

let const

1.let 不能重复声明

2.不能变量提升

3.块级作用域

 {

    let b = 1212;

    let b = 333;

    console.log(b);

  } 

  console.log(b);

  for (var i =0;i<5; i++) {

    setTimeout(function(){

      console.log(i);

    },1000)

  }

  let a = "12121";

const

通常用来声明一个常量 （声明完不能修改和let一样不能重复声明）

 const m = "张三",

const obj = {

    name: "张三",

    age:18

  };

  const m = "李四"

  obj.name = "李四"

  console.log(obj.name);