freeCodeCamp

title	localeTitle
Declarative Rendering	声明性渲染

安装目录

在我们开始之前，有几种方法可以使用Vue.js，即通过CDN和via 安装。对于第一次体验，使用CDN更容易。

对于开发，请使用：


<!-- development version, includes helpful console warnings --> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

跳到制作时，这个：


<!-- production version, optimized for size and speed --> 
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

如前所述，您也可以安装vue-cli ，但事实并非如此建议初学者。

Vue.js是创建动态页面的绝佳工具，也是第一种进入的方式触摸它就是所谓的声明渲染。

使用术语“声明”意图将这一概念理顺声明性语言，例如SQL：你订购的东西，它并不暗示任何实施。 Vue.js允许您声明您想要的数据渲染，就像那样：


<div id="app"> 
  {{ message }} 
 </div>

let app = new Vue({ 
  el: '#app', 
  data: { 
    message: 'Hello, world!' 
  } 
 });

使用这些snipets，你告诉Vue动态渲染存储的内容内部message变量。乐趣：每当message改变时， Vue.js设法重新加载DOM的特定部分，你看到了更改。

如果您想尝试此反应，请打开控制台并更改de值 app.message ，比如， "Hello from console" 。你注意到了变化吗？这页纸？

{{ ... }}是该行为的语法：输出值变量或表达式。例如，这也是一种有效的用途招致hello ：


<div id="app"> 
  {{ 1 < 2 ? "hello" : "goodbye" }} 
 </div>

我们想要的是使用我们的Vue应用程序设置属性的情况变量。您可能认为相同的语法适用，但Vue有一些东西具体的，我们称之为“约束”。


<div id="app"> 
  <a v-bind:href="dynamicLink">This link</a> 
 </div>

let app = new Vue({ 
  el: '#app', 
  data: { 
    dynamicLink: 'medium.freecodecamp.org' 
  } 
 }

语法v-bind是Vue.js所谓的“指令”。这是一种设置新方式的方法属性为将由Vue处理的标记 - 还有更多指令，它们都以v-开头。