day67-Vue

目录

• Vue
  • 特点
  • 下载
  • null
• Vue实例
• 生命周期钩子
• Vue指令
  • 文本相关指令
  • 斗篷指令
  • 属性指令

Vue

渐进式Javascript框架，可以独立完成前后端分离式web项目的JavaScript

特点

单页面web应用、数据驱动、数据的双向绑定、虚拟DOM

下载

• 开发版本：vue.js
• 生产版本：vue.min.js

Vue实例

1. el：实例

   new Vue({
       el:'#app',
   })
   // 实例与页面挂载点一一对面
   // 一个页面中可以出现多个实例对应多个挂载点
   // 实例值操作挂载点内部内容
   

2. data：数据

   <div id="app">
       {{ msg }}
   </div>
   
   </body>
   <script>
       var app = new Vue({
           el:'#app',
           data:{
   
               msg:'数据'
           }
       })
       console.log(app.$data.msg); // 间接访问
       console.log(app.msg);  // data中的数据可以直接访问
   </script>
   

3. methods：方法

   <style>
       .box { background-color: orange }
   </style>
   <div id='app'>
       <p class="box" v-on:click="pClick">测试</p>
   	<p class="box" v-on:mouseover="pOver">测试</p>
   </div>
   <script>
       var app = new Vue({
       	el: '#app',
       	methods: {
               pClick () {
                   // 点击测试
               },
               pOver () {
                   // 悬浮测试
               }
       	}
       })
   </script>
   <!-- 了解v-on:为事件绑定的指令 -->
   <!-- methods为事件提供实现体-->
   

4. computed：计算

   <div id="app">
    	<input type="text" v-model="a">
       <input type="text" v-model="b">
       <div>
           {{ c }}  <!--根据用户输入的a和b实时拼接-->
       </div>
   </div>
   
   <script>
   	// 一个变量依赖于多个变量
       new Vue({
           el: "#app",
           data: {
               a: "",
               b: "",
           },
           computed: {
               c: function() {
                   // this代表该vue实例
                   return this.a + this.b;
               }
           }
       })
   </script>
   

5. watch：监听

   <div id="app">
    	<input type="text" v-model="ab">
       <div>
           {{ a }}
           {{ b }}
       </div>
   </div>
   
   <script>
   	// 多个变量依赖于一个变量
       new Vue({
           el: "#app",
           data: {
               ab: "",
               a: "",
               b: "",
           },
           watch: {
               ab: function() {
                   // 逻辑根据需求而定
                   this.a = this.ab[0];
                   this.b = this.ab[1];
               }
           }
       })
   </script>
   

6. delimiters：分隔符

   <div id='app'>
       ${ msg }
   </div>
   <script>
       new Vue({
       	el: '#app',
       	data: {
       		msg: 'message'
       	},
           delimiters: ['${', '}']  // 渠道之间的变量名（字符串）
       })
   </script>
   

生命周期钩子

• 表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数
• 钩子函数: 满足特点条件被回调的方法

new Vue({
    el: "#app",
    data: {
        msg: "message"
    },
    beforeCreate () {
        console.log("实例刚刚创建");
        console.log(this.msg
                    
    },
    created () {
        console.log("实例创建成功, data, methods已拥有");
        console.log(this.msg);
    },
    mounted () {
        console.log("页面已被vue实例渲染, data, methods已更新");
    }
    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})

Vue指令

文本相关指令

<div id="app">
    <!-- 插值表达式 -->
    <p>{{ msg }}</p>
    <!-- eg:原文本会被msg替换 -->
    <p v-text='msg'>原文本</p>
    <!-- 可以解析带html标签的文本信息 -->
    <p v-html='msg'></p>
    <!-- v-once控制的标签只能被赋值一次 -->
    <p v-once v-on:click="pClick">{{ msg }}</p>
</div>


<script type="text/javascript">
	// 指令: 出现在html标签中可以被vue解析处理的全局属性
	new Vue({
		el: "#app",
		data: {
			msg: "<h1>message</h1>"
		},
        methods:{
		    pClick(){
		        this.msg = '被点击了'
            }
        }
	})
</script>

点击之前

点击之后

斗篷指令

v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以。
v-cloak不需要表达式，它会在vue实例结束编译时从绑定的HTML元素上移除。在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践。

<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			msg: "message"
		}
	})
</script>
<!-- 避免页面闪烁-->

属性指令

<!-- 给自定义全局属性绑定变量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="'abc'"></p>

<!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>

<!-- 样式绑定 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data: {
            abc: "abc",
            c1: "p1",
            c2: "p2",
            c3: "p3",
			div_style: {
				width: "200px",
				height: "200px",
				backgroundColor: "cyan"
			}
		}
	})
</script>
<!-- v-bind: 指令可以简写为 : -->