2vue基础学习

1案例： 

  
  







  

  
  
hello {{msg}}

2mvm 

MVM:

model :模型，数据对象（data）

view：视图，模板页面

viewModel ：视图模型（vue的实例）

3

声明式开发：vue

命令式开发：juery

4模板语法：

  
  





  
1. 双大括号表达式
  
{{content}}
  
{{content.toUpperCase()}}
  

  


  
2. 指令一: 强制数据绑定
  访问指定站点

  访问指定站点2

  访问指定站点2

  和效果一致

  
3. 指令二: 绑定事件监听
  点我
  点我
  点我

5计算属性和监视

  
  




  姓: 

  名: 

  
  姓名1(单向): 

  姓名2(单向): 

  姓名3(双向): 


  
{{fullName1}}
  
{{fullName1}}

两个监视属性实现了一个计算属性

6class与style绑定

 

  
  
  






  
1. class绑定: :class='xxx'
  
xxx是字符串
  
xxx是字符串
  
xxx是对象
  
xxx是数组

  
2. style绑定
  
:style="{ color: activeColor, fontSize: fontSize + 'px' }"

  更新






/*


*/

7条件渲染

  
  





  
表白成功
  
表白失败

  

  
求婚成功
  
求婚失败

  切换

8列表渲染

  
  






  
测试: v-for 遍历数组
  

    

      {{index}}--{{p.name}}--{{p.age}}
      --删除
      --更新
    
  
  添加

  
测试: v-for 遍历对象

  

    
{{key}}={{item}}
  

 

8-2列表渲染_过滤与排序

  
  





  
  

    

      {{index}}--{{p.name}}--{{p.age}}
    
  
  

    年龄升序
    年龄降序
    原本顺序