引导
vue官网:VUE官网
封装、 库、框架的关系
封装通常指一小部分通用业务逻辑,多个封装形成一个模块或者文件,多个模块或者文件就发展成为库或者框架,而插件是为库或者框架发布后做后期补充,可以有官网或者第三方提供的,有点像游戏中外挂的意思,有时候一个模块就是一个文件,有时候一个文件里面有多个模块,把不同的文件按类别放置到不同的目录里,这个目录叫做包,框架改变了编码思想,库只是个工具你用或者不用不会影响你的编码思想
编码思想
jquery你用或者不用,你的编码思想都会是面向事件,开发一款插件中间用到什么库不重要,你会面向对象开发,如果用vue你要做的就是面向数据
vue开发工具
vue第一个程序hello world
vue的使用,简单理解,new出来一个Vue的实例,传一堆配置参数,控制一片html
<script src="vue"></script> //引入vue库文件
<body>
//V层
<div id="app">
要被控制的html{
{
key}}
</div>
</body>
<script>
let vm = new Vue({
//VM层
el:'#app' //要控制的那片html代码
data:{
key:value}//数据model层 M
})
</script>
data选项
初始化数据位置,元数据,是vue实例的一个实例属性,所接受的数据类型有:
number/string/boolean/array/json/undefined/null
<script src="vue"></script> //引入vue库文件
<body>
<div id="app"> <!-- V层 -->
<div>num:{
{
num}}</div>
<div>str:{
{
str}}</div>
<div>arr:{
{
arr}}</div>
<div>arr2:{
{
arr2}}</div>
<div>json:{
{
json}}</div>
<div>bl:{
{
bl}}</div>
<div>un:{
{
un}}</div>
<div>null:{
{
null}}</div>
<div>fn:{
{
fn}}</div>
<div>调用fn:{
{
fn()}}</div>
</div>
<script type="text/javascript">
let vm = new Vue({
//VM
el:'#app',
data:{
//M层
num:110,
str:'Fengzhi',
arr:['aa','bb','cc'],
arr2:[{
title:'a',des:'xxxx'},{
title:'b',des:'xxxx2'}],
json:{
a:1,b:2},
bl:true,
un:undefined,
null:null,
fn:function(){
alert(1)}
}
})
</script>
</body>
数据绑定(绑定到V层)
插值表达式
{ {数据名}} mustache语法 声明式渲染
指令
v-text="数据名"
v-html="数据"
非转义输出
属性
v-bind:html属性="数据"
属性值动态化
:html属性="数据"
简写
v-bind:[属性名]="数据"
属性名动态化
<script src="vue"></script> //引入vue库文件
<body>
<div id="app"> <!-- V层 -->
<h3>mustache插值表达式</h3>
<div>num:{
{
num}}</div>
<div>strong:{
{
strong}}</div>
<h3>指令</h3>
<div v-text="num"></div>
<div v-html="strong"></div>
<h4>属性</h4>
<div v-bind:title="title">属性的值动态化</div>
<div :title="title">属性动态化-简写</div>
<div v-bind:[proname]="title">属性名+值的动态化</div>
<div :[proname]="title">属性名+值的动态化-简写</div>
</div>
<script type="text/javascript">
let vm = new Vue({
//VM
el:'#app',
data:{
//M层
num:110,
strong:'<strong>强壮</strong>',
title:'盒子',
proname:'alt'
}
})
</script>
</body>
列表渲染
把数据指定到一些dom中去渲染,推荐操作的数据类型:变量数组、对象、字符、数字
<script src="vue"></script> //引入vue库文件
<body>
<div id="" class="app">
<h3>列表渲染</h3>
<ul>
<li>{
{
arr}}</li>
</ul>
<hr>
<ul>
<li v-for="val in arr">{
{
val}}</li>
</ul>
<hr>
<ul>
<li v-for="val of arr">{
{
val}}</li>
</ul>
<hr>
<ul>
<li v-for="(val,index) in arr">{
{
index}}.{
{
val}}</li>
</ul>
<hr>
<ul>
<ol v-for="(item,index) in arr2">{
{
index}}-{
{
item.id}}-{
{
item.name}}-{
{
item.age}}</ol>
</ul>
<hr>
<ul>
<li v-for="item in arr3">
{
{
item.name}} - {
{
item.age}} - {
{
item.id}}
<ul>
<li v-for="item2 of item.children">
{
{
item2.id}} - {
{
item2.name}} - {
{
item.age}}
</li>
</ul>
</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) in json">{
{
value}} - {
{
key}}</li>
</ul>
<hr>
<ul>
<li v-for="(n,index) in 10">{
{
index}} - {