Vue.js——v-指令详解，component组件

其实，2016年至今，Vue发展逐渐占据主体，其“vue”为法语名，实则中文名为“view”，它主要是基于“MVVM”进行设计并开发的。

M——Model        模型，用于数据保存

V——View         视图，用于用户界面设置

VM——ViewModel   视图模型，用于实现双向绑定

     即view的变化，自动反映在了viewModel上边，反之亦然。

1、文本

（1）数据插值{{ message }}

    
{{ message }}

（2）html  v-html用于输出html代码

注意，若设置html属性中的值应使用v-bind指令。

    修改颜色




    directiva v-bind:class

（3）指令

对于指令，多采用“v-”作为前缀进行设置，用于设置当表达式值改变时，将某些行为应用到DOM上。

    
现在你看到我了

上述代码中，v-if指令将表达式seen的值true或false来判断是否插入p元素。

由于v-show可以实现与v-if相同的效果，即以下面的一个案例进行显示。

      

		

			

				You must enter a message to submit
			
			
			
			
			send message
		
		
		
{{ $data|json }}
	
		
	
	

当前代码若在控制台console中，点击F12键审查元素，会发现，

        （1）若是“v-show”指令，当我们在“textarea”中进行输入元素，其相邻元素div会出现“

”，即表示相邻元素div依然存在。

（2）若改为“v-if”指令，相对应的“div style="display:none">”会随即消失。

2、事件处理event

注意：“v-on:”等价于“@”

	
		
		
	
	
	
		

			Submit {{ count }} 
		
		
		
		
	

上述代码运行后，初始化为“submit0”，每当点击一下按钮，submit0都会++，

在该实例中，用的“@”代替了“v-on:”，在该实例中，显示的event事件为“onClick()”，由于代替了“v-on:”，所以直接写为“@Click”。

3、组件化component

结合template模板，实现代码重用功能，

等价于“

   

Hello world！

        ”

为什么采用组件化component呢，目的是为了实现代码重用操作。

案例：点赞喜欢Links or 不喜欢Dislikes

代码不知道哪里有错误，一直显示不出来内容，求解？？？？