1.渲染数据

#view层
     
    
      
{
   { msg }}
   //msg
     
#model层export default {  name: 'HelloWorld',  data () {    return {      msg: 'Welcome to Your Vue.js App',    //msg变量    }  }}

运行效果

 

2.双向数据绑定

#view层  
     
    
      
{
   { msg }}
    
      
{
   { devops }}
    
        
     
#model层export default {  name: 'HelloWorld',  data () {    return {      msg: 'Welcome to Your Vue.js App',      devops: 'DevOps Young Young'    }  }}

  运行效果：会看到输入框中的内容跟devops内容一样，尝试更改输入框中的文本，devops也会跟着变化。

 

3. v-for循环列表

 

运行效果：