stuxt.github.io
stuxt.github.io copied to clipboard
Published
20 hours ago •
stuxt
stuxt
［学习笔记］Vue.js从入门到项目应用
http://cn.vuejs.org/v2/guide/
学习Vue第一天小感悟
一天时间基本看完熟悉了基础的核心功能。但是一些功能有待于实践加强理解。 毕竟MVVM的绑定和jQuery的基于dom的操作是有很大差别的。所以还得在实践 中多多理解，只有理解了才会融会贯通，用起来才会得心应手，这样才能发挥技术的最大价值。
第一天基础学习内容
- [x] Vue实例的创建
- [x] 基本的模板语法
- [x] 计算属性
- [x] 样式绑定
- [x] 条件渲染
- [x] 列表渲染
- [x] 事件处理器
- [x] 表单事件绑定
- [x] 组件
练习小示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Learn</title>
</head>
<body>
<div id="example-1-1">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<h1>声明式渲染</h1>
<div id="app">
{{ message }}
</div>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<h1>条件渲染</h1>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
<template v-if="seen">
<p>现在你看到我了1</p>
<p>现在你看到我了2</p>
<p>现在你看到我了3</p>
</template>
<div v-if="Math.random() > 0.5">
Now you see me,> 0.5
</div>
<div v-else>
Now you don't,< 0.5
</div>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<h1>处理用户输入</h1>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<h1>组件化应用构建</h1>
<div id="app-7">
<ol>
<!-- 现在我们为每个todo-item提供待办项对象 -->
<!-- 待办项对象是变量，即其内容可以是动态的 -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<ul id="example-1">
<li v-for="item in items">
{{item.message}}
</li>
</ul>
<script src="assets/vue.js"></script>
<!-- Since there is already a rich ecosystem of ajax libraries -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="assets/axios.min.js"></script>
<script src="assets/lodash.min.js"></script>
<script type="text/javascript">
var example11 = new Vue({
el: '#example-1-1',
data: {
counter: 0
}
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '随便其他什么人吃的东西' }
]
}
})
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 question 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// _.debounce 是一个通过 lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问yesno.wtf/api的频率
// ajax请求直到用户输入完毕才会发出
// 学习更多关于 _.debounce function (and its cousin
// _.throttle), 参考: https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
var vm = this
if (this.question.indexOf('?') === -1) {
vm.answer = 'Questions usually contain a question mark. ;-)'
return
}
vm.answer = 'Thinking...'
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为用户停止输入等待的毫秒数
500
)
}
})
var example1 = new Vue({
el:"#example-1",
data:{
items:[
{message:'Foo'},
{message:"Bar"}
]
}
})
</script>
</body>
</html>
`