Vue基础
Vue基础
Soc原则：关注点分离员职责
Vue的核心库只关注视图层，方便与第三方库或既有项目整合
vue核心：DOM监听和数据绑定
Vue:融合MVVM+虚拟DOM
后台MVC-------->M:model V:view C:controller
前端MVVM----->Data: 数据 View:JSP VM:数据双向绑定
CSS预处理器
一门专门的编程语言，进行Web页面样式设计。
常见的css预处理器：
-
SASS:基于Rubby，通过服务端处理，需要学习Rubby语言
-
LESS:基于NodeJS，通过客户端处理，上手简单
创建第一个程序
<body>
<!--view层 模板-->
<div id="app">
{{message}}
</div>
<!-- 导入vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
// 创建vue对象，vm：数据双向绑定
var vm=new Vue({
el:'#app', //绑定元素的id是app
//model层 数据
data:{
message:"Hello vue"
} //放一个数据
});
</script>
</body>
//vm层 双向绑定数据 不用刷新，页面也会改变
>vm.message="你好"
'你好'
问题：渲染不成功，页面显示{{message}}
解决：1.查看引用的cdn,使用2.x版本以上的
2.var vm=new Vue({}) new Vue中V大写
创建vue程序步骤：
- 导入vue
- 创建一个vue对象
- 绑定一个元素
- 放入数据
- 从模板中取出
HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
数据可以绑定在文本上
MVVM
双向绑定：页面不需要刷新，就能实现控制台的变化
优点：
- 低耦合：view和model分离，当View修改时Model可以不变，当Model修改时View可以不变
基本语法
v-bind绑定元素
<span v-bind:title="message">看看悬浮有什么！
绑定message数据到span上，悬浮显示message内容
前缀 v-表示指令，以表示它们是 Vue 提供的特殊 attribute
数据绑定在行为上
v-if条件判断
<div id="see">
<span v-if="seen">你能看到我吗</span>
</div>
var ne=new Vue({
el:"#see",
data:{
seen:false
}
});
-
当seen:false--->span标签不显示
-
当seen:true---->span标签显示
控制台改变seen的值，文字也会随之发生变化
数据可以绑定在DOM结构上
v-for循环
<!--循环 通过遍历调用数组中的值 -->
<div id="each">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#each',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
});
在todos数组中，依次取出数组值，形成一个列表
通过绑定数组数据，渲染列表
控制台输入app4.todos.push({text:'新项目'})，可以在列表最后加上一条数据
v-on添加事件监听器
<div id="on">
<p>{{message}}</p>
<button v-on:click="reverse">两极反转</button>
</div>
var on=new Vue({
el:"#on",
data:{
message:"Hello World"
},
methods:{
reverse:function(){
this.message=this.message.split('').reverse().join('')
}
}
});
v-on:click 点击按钮触发reverse函数
编写的代码只需要关注逻辑层面即可
v-model
<div id="input">
<p>{{message}}</p>
<input v-model="message">
</div>
var a=new Vue({
el:"#input",
data:{
message:"Hello"
}
});
实现表单输入和应用状态的双向绑定,输入框输入变化后，显示内容也会改变
组件基础
将常用的功能封装抽象成组件，便于重复，独立使用
一个组件本质上是一个拥有预定义选项的一个 Vue 实例
<div id="app">
<!-- v-bind 通过遍历绑定到组件的first -->
<name
v-for="sub in item"
v-bind:first="sub"
></name>
</div>
//定义组件
//Vue.compotent('组件名',{对象})
Vue.component('name',{
//props结束传入组件的数据,相当于形参
props:['first'],
template:'<li>{{first}}</li>'
})
var a=new Vue({
el:"#app",
data:{
item:["java","python","c++"]
}
});
//数据传递方向：
a.item->sub->first->在<li>中使用
在一个大型应用中，有必要将整个应用程序划分为组件，提供更为复杂的模板和逻辑，而不会影响到父单元，以使开发更易管理
注意
自定义组件名一定不能有大写，在标签中所有的大写会自动转化为小写
浙公网安备 33010602011771号