vue-初识

Posted 2020-09-06 小拽A

一：vue基础
1.1.Vue是一套构建用户界面的渐进式框架
1.2.引入vue：<script src="https://unpkg.com/vue/dist/vue.js"></script>
1.3.值插入：
1.3.1:插入dom
dom：
<div id="app">
{{ message }}
</div>
vue：
var app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue!‘
}
})
el：vue的作用域
data：vue的数据

1.3.2.插入属性
dom：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
vue：
var app2 = new Vue({
el: ‘#app-2‘,
data: {
message: ‘页面加载于 ‘ + new Date()
}
})
1.3.2条件绑定：
dom：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
vue：
var app3 = new Vue({
el: ‘#app-3‘,
data: {
seen: true
}
})
if指令：如果为true，则所绑定的元素加载，如果为false，所绑定的元素卸载
1.3.3循环绑定：
dom：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
vue：
var app4 = new Vue({
el: ‘#app-4‘,
data: {
todos: [
{ text: ‘学习 javascript‘ },
{ text: ‘学习 Vue‘ },
{ text: ‘整个牛项目‘ }
]
}
})
1.3.4事件监听：
dom：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
vue：
var app5 = new Vue({
el: ‘#app-5‘,
data: {
message: ‘Hello Vue.js!‘
},
methods: {
reverseMessage: function () {
this.message = this.message.split(‘‘).reverse().join(‘‘)
}
}
})
1.3.5:表单控件双向绑定
dom：
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>

vue：
var app6 = new Vue({
el: ‘#app-6‘,
data: {
message: ‘Hello Vue!‘
}
})
2.组件化应用构建
界面是一个由组件构成的树，这个思想很重要
2.1.注册组件
vue：
Vue.component(‘todo-item‘, {
template: ‘<li>这是个待办项</li>‘
})
todo-item：组件名
template：组件体
dom：
<ol>
<todo-item></todo-item>
</ol>
对创建的组件实例化
2.2添加组件属性
vue：
Vue.component(‘todo-item‘, {
props: [‘todo‘],
template: ‘<li>{{ todo.text }}</li>‘
})
props：新属性
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
用循环指令得到iterm，并把iterm绑定给我们注册的主键体
vue：
Vue.component(‘todo-item‘, {
props: [‘todo‘],
template: ‘<li>{{ todo.text }}</li>‘
})
注册组件 todo-iterm
为注册的组件添加属性 todo

var app7 = new Vue({
el: ‘#app-7‘,
data: {
groceryList: [
{ text: ‘蔬菜‘ },
{ text: ‘奶酪‘ },
{ text: ‘随便其他什么人吃的东西‘ }
]
}
})

总结：
1,介绍了vue是一个web组件框架
2，介绍了组件的vue数据渲染（插入）
1.绑定
2.if绑定
3.for绑定
4.监听
5.表单绑定
3.组件化思想，非常重要
4.注册组件
5为注册的组件添加属性

反对收费教程，开放源代码，共享编码乐趣