JavaScript & Vue一、JavaScript 1、JSON-基础语法定义 var 变量名 = '{"key

一、JavaScript

1、JSON-基础语法

定义 var 变量名 = '{"key1": value1, "key2": value2}';
JSON字符串转换为JS对象： var jsObject = JSON.parse(userStr);
JS对象转化为JSON字符串 var jsonStr = JSON.stringify(jsObject);

示例代码如下：

    //定义JSON
    var jsonstr = '{"name": "Tom", "age": 18, "addr": ["北京", "上海", "西安"]}';

    //json字符串对象--js对象
    var obj = JSON.parse(jsonstr);

    //js对象--json字符串
    var ab = JSON.stringify(abj);

2、BOM

属性
- history：对 History 对象的只读引用。
- location：用于窗口或框架的 Location 对象。
- navigator：对 Navigator 对象的只读引用。
方法
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。

//获取
    window.alert("Hello BOM");
    alert("Hello BOM Window");

    //方法
    confirm - 对话框 -- 确认: true , 取消: false
    var flag = confirm("您确认删除该记录吗?");
    alert(flag);

    //定时器 - setInterval -- 周期性的执行某一个函数
    var i = 0;
    setInterval(function(){
        i++;
        console.log("定时器执行了"+i+"次");
    },2000);

    //定时器 - setTimeout -- 延迟指定时间执行一次 
    setTimeout(function(){
        alert("JS");
    },3000);

    //location
    alert(location.href);

    location.href = "https://www.baidu.com";

3、DOM

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
- 根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
- 根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
- 根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
- 根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');

//1. 获取Element元素

    //1.1 获取元素-根据ID获取
    var img = document.getElementById('h1');
    alert(img);

    //1.2 获取元素-根据标签获取 - div
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }


    //1.3 获取元素-根据name属性获取
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);
    }


    //1.4 获取元素-根据class属性获取
    var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }



    //2. 查询参考手册, 属性、方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];
    
    div1.innerHTML = "hello";

4、事件监听

通过 HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">

<script>
    function on(){
        alert('我被点击了!');
    }
</script>

通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">

<script>
    document.getElementById('btn').onclick=function(){
        alert('我被点击了!');
    }
</script>

二、Vue

1、创建Vue

新建HTML页面，引入Vue.js文件 <script src="js/vue.js"></script>
在JS代码区域创建Vue核心对象，定义数据模型

<script>
    //定义Vue对象
    new new Vue({
        el: "#app", //vue接管区域
        data: {
            message: "Hello Vue"
        }
    })
</script>

编写视图

<body>
    <div id="app">
        <input type="text" v-model="message"> {{message}}
    </div>
</body>

结果如下：

2、生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

<script>
    new Vue({
        el: "#app",
        data: {
            
        },
        mounted() {
            console.log("Vue挂载完毕,发送请求获取数据");
        },
        methods: {
           
        },
    })
</script>

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）