JS-Vue-指令 JSON Ajax

Hello World️

已于 2022-08-23 16:37:43 修改

阅读量413

点赞数

分类专栏：前端学习文章标签： javascript vue.js json

于 2022-08-23 16:30:05 首次发布

本文链接：https://blog.csdn.net/m0_51318597/article/details/126487725

版权

文章目录

ES6语法

●变量拼接
    var num = 100;
    var flag = true;
    var str = "这是一行" + num + "字符" + flag + "串";
    //${变量}
    var s = `这是一行${num}字符${flag}串`;

●JSON对象键值对写法
	var username = "jack";
    var password = "123456";
    var json = {
        "username": username,
        "password": password
    }
    //键的名字和值的变量名称相同 可以简写如下
    var json2 = {
        username,
        password
    };

●JSON对象 键的值是一个函数时
	var json3 = {
        "username": username,
        "password": password,
        eat: function() {
            alert("eat");	
        }
    }
    json3.eat();

    //es6中 JSON对象 键的值 是一个函数 可以简写如下
    var json4 = {
        "username": username,
        "password": password,
        eat() {
        	alert("eat");
        }
    }
    json4.eat();

●形参默认值
    function show(a = 100, b = 200) {
    	alert(a + "====" + b);
    }
    show(20, 30);

●定时器this
	var jsonObj = {
        "username": "tom",
        "password": "123456"
    }
    setTimeout(function(jsonObj) {
        alert("定时器" + this)
        //定时器[object Window]
    }, 1000);

    //箭头函数 里面没有this
    //此时的this是外层的this
    setTimeout((jsonObj) => alert("定时器" + this), 3000);

●解构赋值
    var [a, b, c] = [10, 20, 30];
    alert(a + "=" + b + "=" + c);
	// 10=20=30

●箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。
    function fn() {
    window.setTimeout(() => {
    // 定义时，this 绑定的是 fn 中的 this 对象
    console.log(this.a);
    }, 0)
    }
    //var a = 20;
    // fn 的 this 对象为 {a: 18}
    fn.call({
    a: 18
    }); // 18

Vue第一个案例

<html>
	<head>
        <meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
    
	<body>
		<!-- 定义一个根标签
			 起一个id 
			 这个跟标签作为vue的模板页面-->
		<div id="box">
			<!-- 声明式渲染
			 {
   { }} 插值表达式-->
			<h1>{
  {msg}}</h1>
		</div>
	</body>

	<script>
		//创建Vue实例
		var app = new Vue({
     
			//el Vue选择控制的那块区域 指定模板标签
			el: '#box',
			//data  Vue绑定的数据
			data: {
     
				msg: 'hello Vue'
			}
		});

		//进入浏览器 -> F12 -> 控制台 
		//输入app.msg 可以显示hello Vue
		//更该页面输入 app.msg='jack' 页面显示jack
		/*
		 现在数据和 DOM 已经被建立了关联，所有东西都是响应式的
		 数据一变化视图也跟着变化
		 
		 注意我们不再和 HTML 直接交互了。
		 一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #box) 
		 然后对其进行完全控制。
		 那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部
		*/
	</script>
</html>

模板语法之插值表达式

<body>
    <div id="box">
        <!-- 插值表达式{
   { }} -->
        <h1>{
  {msg}}</h1>

        <!-- 插值表达式 支持运算符 -->
        <h1>{
  {num+20*2}}</h1>
        <h1>{
  {num+20*2>200}}</h1>
        <h1>{
  {flag==false}}</h1>

        <!-- 三元运算符也可以 -->
        <h1>{
  {num>100?'大于':'小于'}}</h1>

        <!-- 插值表达式 也支持 调用JS的方法
但是这个方法要有返回值-->
        <h1>{
  {msg.split("").reverse().join("")}}</h1>

        <!-- 虽说可以在插值表达式 支持运算符 以及调用JS方法
但一般情况下 我们不会这么做 我们只是单纯的数据渲染处理-->

    </div>
</body>
<script>
    new Vue({
     
        el: '#box',
        data: {
     
            msg: 'hello',
            num: 100,
            flag: true
        }
    })
</script>

文本插入v-text和v-html指令

<body>
    <div id="box">
        <h1>{
  {msg}}</h1>

        <!-- 
        指令：就是Vue提供的一个行间属性(写在标签上的属性) 可以把一些行为 应用到标签上
        Vue提供的行间属性都是v-开头的
        你会发现， 我们使用vue基本上， 不用我们去操作DOM 我们只关心数据和视图， 数据一变化， 视图就会自动更新。
        视图变化也会引起数据的变化	
        -->

        <h1 v-text="msg"></h1>
        <!-- 会对html标签进行转义 -->
        <h2 v-html="text"></h2>
    </div>
</body>

<script>
    new Vue({
     
        el:'#box',
        data:{
     
            msg:'hello',
            text:'<s>呵呵</s>'
        }
    })
</script>

不解析模板语法v-pre指令

<body>
    <div id="box">
        <!-- v-pre Vue不去解析模板语法 保持原有的内容 -->
        <h1 v-pre>{
  {msg}}</h1>
    </div>
</body>

<script>
    new Vue({
     
        el:'#box',
        data:{
     
            msg:'hello'
        }
    })
</script>

解决初始化v-cloak指令

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /* v-cloak指令可以解决初始化慢而导致页面闪动 */
        [v-cloak]{
     
            display: none;
        }
    </style>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="box">
        <!-- 
        当数据{
   {msg}}渲染完毕后 
        v-cloak就会从标签上消失
        -->
        <h1 v-cloak>{
  {msg}}</h1>
    </div>
</body>

<script>
    new Vue({
     
        el:'#box',
        data:{
     
            msg:'hello'
        }
    })
</script>