前提需要:
HTML、CSS、JS、JQ
一、安装nodejs
node下载地址https://nodejs.org/en/
二、淘宝镜像站配置
命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org
三、使用淘宝镜像安装vue
1.安装vue
cnpm install vue
2.安装vue-cli
cnpm install --global vue-cli
基础练习:
// 使用步骤:
// 1.引包
// 2.启动vue,通过new Vue(options);
// 3.配置options选项对象
// 4.el:'目的地' template:模板 data:function(){return{要使用的key:数据}}
// 5.页面中存在该目的地,目的地字符串描述同jq方式一样
<div id="app">
<span>{{message}}</span>
</div>
<script>
//通过vue对象,去new Vue(options):
new Vue({
//el:发生行为的目的地。
//还可以书写: el:document.getElementById('app'),
//在vue内部运行机制中,需要根据你传递的字符串进行判断,比如,#xxx/.xxx,还是div 元素查找。
//使用el:document.getElementById('app')将会更为优化,将元素直接找到,避免了vue来去判断
//也可以用类名或标签名查找。
el:'#app',
//template:装载的模板
template:'<div><h1>Hello world,{{text}}</h1></div>',
//动态数据的声明
data:function(){//最常用
return{
text:'hello vue'
}
}
// data:{//也可以使用对象
// message:"hello world"
// }
})
</script>
##插值表达式:{{表达式}}
表达式可以是:
对象{{ {name:'jack'} }}
字符串{{'xxx'}}
判断后的布尔值{{true}}
三元表达式{{true?'yes':'no'}}
注:不要连续3个{{{name:'jack'}}}。如需使用,可以写作:{{ {name:'jack'} }}
可以用于页面中简单粗暴的调试
注:必须在data这个函数中返回的对象中声明。
##指令
在vue中提供了一些对于页面+数据的更为方便的操作(输出),这些操作就叫做指令。
类似于html页面中的属性<div v-xxx></div>
比如在angular中以ng-xxx开头的就叫做指令。
在vue中以v-xxx开头的就叫做指令。
指令中封装了一些DOM行为,结合属性作为一个暗号,暗号有对应的值根据不同的值,框架会进行相关DOM操作的绑定。
vue中常用的v-指令
v-text元素的InnerText属性,必须是双标签
v-html元素的innerHTML
v-if判断是否插入这个元素
v-else-if
v-else
v-show隐藏元素,如果确定要隐藏,会给元素的style加上dispaly:none;
实例练习:
<script>
//启动vue
new Vue({
el:'#app',
//必须一个根节点。``引号中书写的内容支持换行
template:`
<div>
<span v-text="myText">这里的内容会被覆盖</span>
<span v-html="myHTML"></span>
<button v-if="isExit">测试v-if</button>
<!--三个元素必须是相邻的DOM元素。-->
<button v-if=" num == 1 ">测试v-if</button>
<button v-else-if=" num == 2 ">测试v-else-if</button>
<button v-else >测试v-else</button>
<button v-show="isShow">我是v-show</button>
</div>
`,
//动态数据的声明
data:function(){
return{
myText:'<h1>我是v-text的值</h1>',
myHTML:'<h1>我是v-html的值</h1>',
isExit:true,//当值为flase时原button处会留下一个注释的坑<!---->
num:2,
isShow:false
}
}
});
</script>
v-bind使用(绑定属性值)
给元素的属性赋值<div file="{{变量}}"></div>
可以给已经存在的属性赋值input value
也可以给自定义属性赋值mydata
语法:在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"
例:
<div v-bind:原属性名="变量"> </div>
<div :属性名="变量"> </div>
v-on的使用(绑定事件)
处理自定义原生事件的给按钮添加click并让使用变量的样式改变
在元素上 v-on:原生事件名="给变量进行操作||函数名"
简写形式: @原生事件名="给变量进行操作"
练习:
<div id="app">
</div>
<script>
//启动vue
new Vue({
el:'#app',
//若要书写常量,结构为" 'xxx' "
//value值是根据vue内部的变量而书写的。点击按钮时改变了vue内部的变量。
//vue察觉到页面中使用的变量更改了,所以重新渲染了视图的更改部分。
template:`
<div>
<input type="text" v-bind:value="myValue" :file=" 'xxx' " />
<button v-on:click="myValue='icebns'">点我改变myValue</button>
<button @click="myValue='hyzc'">简写改变myValue</button>
</div>
`,
data:function(){
return{
myValue:"咩?",
}
}
});
</script>
v-model
双向数据流(绑定)
页面改变影响内存(js)内存(js)改变影响页面
练习:
<!--
v-bind可以给任何属性赋值,他是从vue到页面的单向数据流
v-model只能给具备value属性的元素进行双向数据绑定。(必须使用的是有value属性的元素)
-->
<div id="app">
</div>
<script>
//启动vue
new Vue({
el:'#app',
//当元素的value值被改变以后 就会给vue中的属性赋值,进而重新渲染。
template:`
<div>
<input type="text" v-model:value="myValue" />
当用户输入XXX的时候,显示下面的button
<button v-show="myValue== 'xxx'">用户输入的是xxx</button>
</div>
`,
data:function(){
return{
myValue:"咩",
}
}
});
</script>
## v-bind和v-model的区别?
input v-model=" name'
双向数据绑定页面对于input的value改变,能影响内存中name变星
内存js改变name的值,会影响页面重新渲染最新值
input :value="name"
单向数据绑定内存改变影响页面改变
v-model:其的改变影响其他 v-bind: 其的改变不影响其他
v-bind就是对属性的简单赋值当内存中值改变,还是会触发重新渲染
v-for的使用
基本语法v-for="item in arr"
对象的操作v-for="item in obj" 如果是数组没有id
<div id="app">
</div>
<script>
// 补充:v-for的使用中,除了item属性,也还有一些辅助属性
//stus:数组: (item,index)in stus
//奇偶数不同样式
//:class="index%2==0?'pink':'blue'"
//stus:对象 (value,key,index) in stus
new Vue({
el:'#app',
template:`
<div>
<ul>
<!--item只是一个临时变量,叫什么都可以-->
<li v-for="item in stus" :class="item.myClass">{{item.name}}</li>
</ul>
<br>
<ul>
<li v-for="(val,key,index) in stus2" :class="index%2==0?'b':'a'">
val:{{val}}
key:{{key}}
index:{{index}}
</li>
</ul>
</div>
`,
data:function(){
return{
stus:[{name:'icebns',myClass:'a'},{name:'hy',myClass:'b'},{name:'xw',myClass:'a'}],
stus2:{'a':'icebns','b':'hy','c':'xw'}
}
}
});
</script>
关于对象内的this
vue已经把以前this是window或者事件对象的问题搞定了
methods和data本身是在同一个对象中的,所以在该对象中可以通过this.随意取
this.xxx取data中的值, this.xxxMethod调methods中的函数
四个li同时显示/消失的练习:
<div id="app">
</div>
<script>
new Vue({
el:'#app',
template:`
<div>
<button @click="changeIsShow">点我点我</button>
<h1 v-show="isShow">1</h1>
<h1 v-show="isShow">2</h1>
<h1 v-show="isShow">3</h1>
<h1 v-if="isShow">4</h1>
<!--不能写changeIsShow()-->
</div>
`,
data:function(){
return{
isShow:true
}
},
//在根属性中声明methods属性
methods:{
//key是函数名,value是函数体
changeIsShow:function(e){
//isShow不是全局变量,不能直接引用。所以需要用this引一下
//this就是data函数return出去的对象。
//vue帮我们处理的this指向,不是事件对象。
//<button>点我点我</button>
console.log(e.target);
//Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
console.log(this);
this.isShow = !this.isShow;
}
}
});
</script>