VUE基础常用功能学习和实操（引入JS形式）

1.前言

在这一步之前，笔者已经使用了vue-cli的router了。但是为什么要会过头来学习这儿呢？
请注意我们不推荐新手直接使用 vue-cli，首先推荐用引入JS的方式熟悉在逐步推进。

2.创建普通项目

3.引入Vue的js文件

4.编写Hello Vue!

4.1动态修改

5.绑定元素特性

V-bind

“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”

5.1效果

6.判断特性

code

False

True

6.2.If else

	  Sorry
	
	

	  Not sorry
	

6.3.Else if

      A
    
    

      B
    
    

      C
    
    

      Not A/B/C
    
    

7.绑定数组

7.1. div

7.2.数组

7.3.效果

8.监听——逆转消息

PPT：注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

9. v-model 双向绑定

双向绑定：两个组件绑在一起。
v-model ：复制的克隆内容.

9.1.code

9.2.实现效果

9.3.例子2

  
    选择一个网站
    Runoob
    Google
  
 
  

      选择的网站是: {{selected}}
  

 

9.4.实现效果

10.监听属性 watch

我们可以通过 watch 来响应数据的变化。

    千米 : 
    米 : 

Watch中的val是两个输入框的输入数据

11.样式绑定

11.1.样式类绑定

12.1.实现效果

12.2.过度动画

点我

    
hello

12.3.自定义动画