Vue.js 声明式渲染

Vue.js是一个用于构建用户界面的渐进式框架。核心库仅专注于视图层，易于获取并与其他库集成。 Vue 还可以完美地结合现代工具和支持库来支持复杂的单页应用程序。

Vue 中的声明式渲染使我们能够使用简单的模板语法将数据渲染到 DOM。双花括号用作占位符以在 DOM 中插入所需的数据。

以下示例演示了 Vue.js 中的声明式渲染：

示例 1：

文件名：index.html

HTML

    
    


    
        
          Welcome to the exciting world of {{name}}
          
        
      
    

文件名：app.js

Javascript

const parent = new Vue({
    el : '#parent',
    data : {
      
        // The data that will be
        // interpolated in the DOM
        name : 'Vue.Js'
    }
})

输出：

声明式渲染

示例 2：

文件名：index.html

HTML

    
  


    
        
          Different Frameworks and
          Libraries in Javascript
          
        
            
              {{priority1}}
              is Awesome
            
            
              {{priority2}} 
              is quite good
            
            
              {{priority3}} 
              is good too
            
        
        
    

文件名：app.js

Javascript

const parent = new Vue({
    el : '#parent',
    data : {
      
        // The data that will be
        // interpolated in the DOM
        priority1: "vue.js",
        priority2: "React.js",
        priority3: "Angular.js"
    }
})

输出：

声明式渲染