VueJS：命令行安装与构建
首先，创建一个存放Vue.JS项目的目录：
安装Vue.JS
通过npm安装：
使用Vite快速创建一个Vue的项目：
使用【NPM】的方式：
最终，命令行的呈现：
使用【YARN】的方式：
进入项目目录【hello_worl[……]
VUE.jsCategorySubscribe
Vue.JS：获取一言数据
在看Vue.JS的监听部分与方法调用部分的内容，写了一个小的代码；
代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
< !DOCTYPE html> <html> <head> <!-- 字符集 --> <meta charset="UTF-8"/> <!-- 单页 | 标题 --> <title>请随机给我一段话 | Leviathan·利维坦</title> <!-- 通过UNPKG获得VUE的引用 --> <!-- <script src="https://unpkg.com/vue"> --> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> --> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 --> <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 --> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> </head> <body> <!-- 显示处理 --> <div id="ui-area"> <button v-on:click="get_words">现在就给我一段话！</button> <p>{{ finally_words }}</p> <p>是否和之前的话不一样了？【{{ has_been_changed }}】</p> </div> <!-- 逻辑处理 --> <script> var UIAreaVM = new Vue({ el: "#ui-area", data: { finally_words: "I cannot give you a words until you click the button!!", has_been_changed: '' }, watch: { // 如果，参数【finally_words】发生了改变，这里的代码就会运行 finally_words: function(newData, oldData){ this.has_been_changed = "已经发生了改变：" + new Date().toLocaleString() // this.debouncedGetAnswer() } }, created: function() { this.debouncedGetAnswer = _.debounce(this.get_words, 500) }, methods: { get_words: function() { this.finally_words = "【I am loading...】" var vm = this axios.get('https://v1.hitokoto.cn/') .then(function(response){ vm.finally_words = _.capitalize( response.data.hitokoto + "【来自作品：" + response.data.from + " / 人物：" + response.data.from_who + "】" ) }) .catch(function(error){ vm.finally_words= "Error!! Couldnot reach the API. " + error }) } } }) </script> </body> </html> |
[……]
VUE.JS / 官方文档 / 介绍部分的练习
以下代码为阅读【VUE.JS】官方文档的【介绍】章节的笔记练习；
具体如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
< !DOCTYPE html> <html> <head> <title>My first Vue app</title> <!-- 通过UNPKG获得VUE的引用 --> <!-- <script src="https://unpkg.com/vue"> --> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> --> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <!-- 声明式渲染 --> <hr /> <h3>声明式渲染</h3> <hr /> <div id="app-1"> {{ message }} </div> <script> var app1 = new Vue({ el: '#app-1', data: { message: 'Hello Adamhuan! - [This is Vue.JS]' } }) </script> <!-- 声明式渲染 / 绑定元素 --> <hr /> <h3>声明式渲染 / 绑定元素</h3> <hr /> <div id="app-2"> <span v-bind:title="message"> 鼠标停留几秒钟，将会看到这里的绑定变量。 </span> </div> <script> var app2 = new Vue( { el: '#app-2', data: { message: '当前时间：【' + new Date().toLocaleString() + '】' } } ) </script> <!-- 条件与循环 --> <hr /> <h3>条件与循环 / 1</h3> <hr /> <div id="app-3"> <p v-if="seen">You can see me now.</p> </div> <script> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) </script> <hr /> <h3>条件与循环 / 2</h3> <hr /> <div id="app-4"> <ol> <li v-for="li_item in li_list"> {{ li_item.text }} </li> </ol> </div> <script> var app4 = new Vue({ el: '#app-4', data: { li_list: [ {text: '百度云'}, {text: 'AWS'}, {text: 'Azure'}, {text: '阿里云'}, {text: '腾讯云'} ] } }) </script> <!-- 处理用户输入 --> <hr /> <h3>处理用户输入 / 1</h3> <hr /> <div id="app-5"> <p>内容为：{{ the_data }}</p> <button v-on:click="reverseMessage">【翻转数据】</button> </div> <script> var app5 = new Vue({ el: '#app-5', data: { the_data: "这些数据将会被翻转" }, methods: { reverseMessage: function () { this.the_data = this.the_data.split('').reverse().join('') } } }) </script> <hr /> <h3>处理用户输入 / 2</h3> <hr /> <div id="app-6"> <input v-model="message_data"/> <p> {{ message_data }} </p> </div> <script> var app6 = new Vue({ el: '#app-6', data: { message_data: "你需要输入的内容" } }) </script> <hr /> <h3>组件化应用构建</h3> <hr /> <div id="app-7"> <ol> <todo -item v-for="item in TheList" v-bind:todo="item" v-bind:key="item.id" ></todo> </ol> </div> <script> //注册一个VUE的组件 // 1 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) //使用VUE的组件 var app7 = new Vue({ el: '#app-7', data: { TheList: [ { id: 0, text: '苹果' }, { id: 1, text: '橘子' }, { id: 2, text: '香蕉' }, { id: 3, text: '西瓜' } ] } }) </script> </html> |
[……]
VUE.js: Install on MS Windows10，以及WebStorm的开发环境配置
安装VUE.js的前提是Node.JS，关于这一部分，可以查看我以前的文章：
http://d-prototype.com/archives/9102
安装完成Node.JS后，查看下版本信息：
为了防止因为被屏蔽而导致的NPM安装包的失败，需要为node.js安装国内的源：
[……]