VUE.js – Adamhuan's Data Center – 【逻辑驱动数据】

Vue.JS：获取一言数据

在看Vue.JS的监听部分与方法调用部分的内容，写了一个小的代码；

代码如下：

< !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>

< !DOCTYPE html>

<html>

<head>

<title>请随机给我一段话 | Leviathan·利维坦</title>

</head>

<body>

<button v-on:click="get_words">现在就给我一段话！</button>

<p>{{ finally_words }}</p>

<p>是否和之前的话不一样了？【{{ has_been_changed }}】</p>

</div>

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】官方文档的【介绍】章节的笔记练习；

具体如下：

< !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>

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>

</head>

<hr />

<h3>声明式渲染</h3>

<hr />

</div>

var app1 = new Vue({

el: '#app-1',

data: {

message: 'Hello Adamhuan! - [This is Vue.JS]'

}

})

</script>

<hr />

<h3>声明式渲染 / 绑定元素</h3>

<hr />

鼠标停留几秒钟，将会看到这里的绑定变量。

</span>

</div>

var app2 = new Vue(

{

el: '#app-2',

data: {

message: '当前时间：【' + new Date().toLocaleString() + '】'

}

)

</script>

<hr />

<h3>条件与循环 / 1</h3>

<hr />

</div>

var app3 = new Vue({

el: '#app-3',

data: {

seen: true

}

})

</script>

<hr />

<h3>条件与循环 / 2</h3>

<hr />

<ol>

</li>

</ol>

</div>

var app4 = new Vue({

el: '#app-4',

data: {

li_list: [

{text: '百度云'},

{text: 'AWS'},

{text: 'Azure'},

{text: '阿里云'},

{text: '腾讯云'}

]

}

})

</script>

<hr />

<h3>处理用户输入 / 1</h3>

<hr />

</div>

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 />

<p>

</p>

</div>

var app6 = new Vue({

el: '#app-6',

data: {

message_data: "你需要输入的内容"

}

})

</script>

<hr />

<h3>组件化应用构建</h3>

<hr />

<ol>

<todo -item

v-for="item in TheList"

v-bind:todo="item"

v-bind:key="item.id"

></todo>

</ol>

</div>

//注册一个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安装国内的源：

[……]

发表于： 2019年12月27日 2019年12月27日
作者： Adamhuan
分类： VUE.js
标签： cnpm, Install, MS, MS Windows, node, Node.js, npm, vue.js, WebStorm, windows10, 安装, 配置
发表评论: VUE.js: Install on MS Windows10，以及WebStorm的开发环境配置