- Vue.js 2 Web Development Projects
- Guillaume Chau
- 216字
- 2021-07-02 22:34:24
Displaying text
The first template feature we will see is the text interpolation, which is used to display dynamic text inside our web page. The text interpolation syntax is a pair of double curly braces containing a JavaScript expression of any kind. Its result will replace the interpolation when Vue will process the template. Replace the <p id="root"> element with the following:
<p id="root">
<p>{{ message }}</p>
</p>
The template in this example has a <p> element whose content is the result of the message JavaScript expression. It will return the value of the message attribute of our instance. You should now have a new text displayed on your web page--Hello Vue.js!. It doesn't seem like much, but Vue has done a lot of work for us here--we now have the DOM wired with our data.
To demonstrate this, open your browser console and change the app.message value and press Enter on the keyboard:
app.message = 'Awesome!'
The message has changed. This is called data-binding. It means that Vue is able to automatically update the DOM whenever your data changes without requiring anything from your part. The library includes a very powerful and efficient reactivity system that keeps track of all your data and is able to update what's needed when something changes. All of this is very fast indeed.
- 計算機圖形學編程(使用OpenGL和C++)(第2版)
- LabVIEW入門與實戰開發100例
- Python零基礎快樂學習之旅(K12實戰訓練)
- Troubleshooting PostgreSQL
- 基于Swift語言的iOS App 商業實戰教程
- Arduino可穿戴設備開發
- Bootstrap for Rails
- C指針原理揭秘:基于底層實現機制
- 分布式數據庫原理、架構與實踐
- App Inventor少兒趣味編程動手做
- Exploring SE for Android
- Sitecore Cookbook for Developers
- Dart:Scalable Application Development
- C語言程序設計實驗指導
- Android項目實戰:博學谷