Vue2 的学习经历 初识
生活随笔
收集整理的這篇文章主要介紹了
Vue2 的学习经历 初识
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
初識
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8"><title>Vue</title><script src="lib/vue.js"></script> </head> <body> <script>// 一般直接運行會報兩個錯誤 第一個下載vue 開發者工具，自行百度下載// 第二條會報// You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at https://vuejs.org/guide/deployment.html// 所以 參考官方文檔里的 資料 給一下配置就解決一下問題Vue.config.productionTip = false // 取消生產環境下產生警告 </script> </body> </html>Hello Vue 模板語法
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8"><title>Hello Vue</title><script src="lib/vue.js"></script> </head> <body> <!-- 想讓Vue 工作， 首先創建一個Vue實例 并且傳入配置對象 --> <!-- 然后為 Vue 實例 選擇一個容器 root 容器里的代碼必須符合 HTML 規范 只不過混入了 Vue 語法 --> <!-- {{ value }} 花括號可以讀取所有的 Vue實例 中的 data 的數據--> <!-- 一旦 data 中的數據發生改變，頁面中的數據也會自動發生改變 --> <!-- 插值語法： --> <!-- 1. 功能： 用來解析標簽體內容 --> <!-- 1. 語法： 可以寫 js 的表達式 --> <!-- 指令語法： --> <!-- 2. 功能 解析標簽 標簽屬性 標簽內容 綁定事件 --> <!-- 2. 語法 一般為 v-xxx 開頭 --> <div id="root"><h1>Hello {{ name }}</h1><a v-bind:href="url">這是我的網站</a><a :href="school.url">這是我的個人博客</a> </div> <script>// Vue.config.productionTip = false // 取消生產環境下的警告new Vue({el: '#root', // 用于指定當前 Vue 實例 為那個容器服務， 通常作為 css選擇器// el: document.getElementById('root') // 這樣寫也行呢data: { // 用于提供數據，供 Vue 實例的容器所使用， 當前暫且寫成一個對象name: 'Vue',url: 'https://www.baidu.com',school: {url: 'https://www.blog.cn'}}})// 注意 ：容器和實例一一對應 </script> </body> </html>總結
以上是生活随笔為你收集整理的Vue2 的学习经历 初识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美菜商城
- 下一篇： Centos 7 搭建nginx 服务