前言
学习新的技术以及语言,首当前冲的学习方式肯定是官网,别人的博客以及视频可以帮助你加速理解,
vue官网:https://cn.vuejs.org/v2/guide/
vue.js是什么
所有的框架都是帮助你整合资源,简化开发者的工作量,框架就像工具,人的聪明主要是会发明创造并使用工具
用的好的单车变摩托
vue 是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,只关注图层,并且与其他组件兼容性好
起步
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
或者下载Vue.js 直接导入本地
案例hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<title>1</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
var app1 = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
})
</script>
</body>
</html>
这里的script 需要在div的下面.否则报错,id选择器找不到
除了直接在文本中插值,还可以通过v-bind绑定元素 attribute,指令带有前缀v-,表示是Vue提供的特殊attribute
<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>
在控制台重新将app2变量的值进行修改,会发生页面上值也会发生动态变化
条件与循环
控制台修改变量的值,该模块消失
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true,
},
})
</script>
同时vue也可以绑定DOM结构 例如使用v-for渲染项目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'study js' },
{ text: 'study vue' },
{ text: 'study all ' },
],
},
})
</script>
通过v-on指令添加一个事件监听器,通过它调用Vue实例中定义的方法
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js',
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
},
},
})
</script>
v-model 实现双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
组件系统的应用构建
将抽象,允许我们使用小型,独立和通常可复用组件构建大型应用
注册模板
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
var app = new Vue(...
在body里面就可以当类似标签使用
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
<div id="app7">
<ol>
<!-- 现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。 -->
<todo-item v-for="item in testList" v-bind:todo="item" v-bind:key="item.id">
</todo-item>
</ol>
</div>
</div>
<script>
Vue.component('todo-item',{
//todo-item 组件 ,prop 相当于一个自定义的attribute,名为todo
props: ['todo'],
template: '<li>{{todo.text}}</li>'
})
var app7 = new Vue({
el:"#app7",
data:{
testList:[
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
