1.vue 基本格式
// vue创建 并添加属性
var dog = new Vue({
// 使用vue对象的标签的id
el:'#ps',
// data用来放置程序的初始化数据
data:{
message:'hello world'
}
})
2.vue文本显示
<!-- <i>我是v-text文本显示</i> -->
<h3 v-text='text'></h3>
<!-- 我是v-html文本显示 -->
<h3 v-html='html'></h3>
3.事件
<!-- 方法加不加()均可 -->
<h3 v-on:click='first'>first</h3>
<h4 v-on:click='second()'>first</h4>
<!-- 参数未加引号 则表示为变量 那么该变量会去data当中找 -->
<!-- 输出 今天天气不错-->
<h2 v-on:click='hello(message)'>参数未加引号</h2>
<!-- 输出 message-->
<h2 v-on:click='hello("message")'>参数加引号</h2>
<!-- v-on的缩写是@ -->
<h1 @click='hello(message)'>nice</h1>
4.条件判断
<!-- DOM : 标签组成的树状结构 称之为DOM解结构 -->
<!-- v-if当值为true的时候 将标签添加到DOM结构当中
当值为false 的时候 将标签从DOM接口当中删除 -->
<h3 v-if='isRain=="1"'>晴天</h3>
<h3 v-else-if='isRain=="2"'>阴天</h3>
<h3 v-else-if='isRain=="3"'>雨天</h3>
<h3 v-else>雷阵雨 </h3>
<!-- v-show 当值为true的时候 给标签添加属性 display:block
当值为false的时候 给标签添加属性 display:none -->
<h3 v-show='isRain=="1"'>晴天</h3>
<h3 v-show='isRain=="2"'>阴天</h3>
<h3 v-show='isRain=="3"'>雨天</h3>
5.循环
v-for是父组件使用（不是子组件使用，虽然他在子组件上），来循环创造子组件
<div id="vue">
<h1>
<div v-for='(item,index) in list'>
{{index*10}}.{{item}}
</div>
</h1>
</div>
6.methods
// methods 方法
methods: {
// 通常我们会将所有的函数放入到methods属性里面
// 如果在data属性里面有和methods属性同名的方法
// 那么会执行data里面的函数（优先级高）
myClick(){
console.log('nice')
}
7.属性绑定
1.当属行值为常量是 src='value'
2.当属性值为变量是v-bind:src='value' :src='value'
<!-- v-bind: 当属性的值 为变量的时候 需要动态绑定属性值-->
<!-- v-bind: -->
<img v-bind:src='imgSrc' alt="">
<!-- :为v-bind:的简写 -->
<img :src="imgSrc" alt="">
8.类名绑定
<h1 :class="myColor"></h1>
<h1 :class ='{success:true}'></h1>
<!-- {参数1，参数2} 参数1为类名 参数2为在data内的变量 变量转为boolean 为true则添加类名1 否则不添加-->
<h1 :class = '{warning:showInfo ,fontColor }'>324524</h1>
<!-- {参数1} 参数1以为添加的类名 在data中找 变量转为boolean 为true则添加类名1 否则不添加-->
<h1 :class = '{success}'></h1>
<!-- 同时添加多个类名 clssList为数组 -->
<h1 :class = 'classList'>34234324</h1>
9.双向数据绑定v-model
<main id="app">
<!-- v-model的值
input的value值 特殊为checkbox中的checked值true或false-->
<select v-model='index'>
<option v-for='(item,value) in arr' :value = 'item' v-text='value'>
</option>
</select>
<h3 v-text='index'></h3>
</main>
<script>
var vue = new Vue({
el:"#app",
data:{
arr:[10,20,30],
index:'10'
}
})
</script>
10 watch 监听data内属性值如：message的变化 一旦变化就执行watch所对应的 message方法
var vue = new Vue({
el:"#app",
data:{
message:"nice" ,
provinceName:"河南",
cityName:"郑州",
areaName:"高新区"
},
// 监听属性
watch: {
// 一旦发现message的值发生变化 就调用对应的函数
message:function(){
console.log('nice变成小美了')
},
provinceName(){
console.log('省份改变了')
this.cityName = '厦门市'
},
cityName(){
console.log('城市改变了')
this.areaName = '翔安区'
},
areaName(){
console.log('区域改变了')
}
},
})
11,computed属性
// computed 计算
// computed存放需要计算得到的属性
// computed 计算属性会缓存上次的计算结果
// 如果计算因子没有发生改变 那么就使用上次的缓存结果
// 如果计算因子发生改变 那么就重新计算
12利用computed来绑定动态style
<!-- 动态绑定样式 那么该样式需要在computed当中声明 -->
<h1 :style="mainStyle">hello world</h1>
computed: {
mainStyle(){
return {
height:Math.random() * 200 + 200 + 'px' ,
backgroundColor:'rgb(' + Math.random() * 255 + ',' + Math.random() * 255 + ','
+ Math.random() * 255 + ')'
}
},
message1(){
this.message += this.message
return this.message
}
},
13指令修饰符
<!-- prevent 阻止 点击的时候 阻止默认事件发生-->
<a href="http://www.jd.com" @click.prevent>京东</a>
<!-- 停止父标签的事件传递 同时给自己添加一个事件 -->
<div @click.stop="newClick"></div>
<!-- once 只触发一次 -->
<div @click.once='firstClick'>hello world</div>
14过滤器
// 全局过滤器
Vue.filter('newPrice',function(value){
var splitArray = value.split('.')
return splitArray[0];
})
// 局部过滤器
filters:{
'newMessage':function(value){
return value + value;
},
'oldValue':function(){
return
},
'secondValue':function(){
return
}
}
<!-- 过滤器调用 -->
<!-- 1.{{参数1,参数2}} 参数1为传递的值 参数2为过滤器名字 -->
{{price | newPrice}}
<!-- 2.标签内调用 $options.filters为固定的 $options.filters.filterName(value)-->
<h2 v-text='$options.filters.newPrice(price)'></h2>
<!-- 过滤器调用 -->
{{message | newMessage}}
15组件
// new Vue({}}与Vue.component()都是一个组件，所以new Vue({})所具有的属性 Vue.component()
也都具有,例如也可有子组件(components) data watch computer等
// 全局组件
Vue.component('first',{
// 获取组件
template:'#first-temp',
// 子组件当中的data必须是一个函数
// 确保每一个子组件在加载的时候 得到一个唯一的data对象
data() {
return {
num:20,
}
},
methods: {
add(value){
this.num += 1
}
},
})
// 子组件
components:{
// 标签名 尽量不要有大写字母有的话，使用标签时格式为 getItem ==> get-item
'getItem':{
// 组件id名
template:'#setItem',
}
}
<!--组件配置 -->
<script id="first-temp" type="text/html">
<!-- 根节点 必须存在 -->
<div style="border:1px solid black">
<!-- 调用组件内data的值 -->
<h2>{{num}}</h2>
<button @click='add()'>+</button>
</div>
</script>
<!-- 组件的应用 -->
<main id="vue">
<!-- first的声明在全局 为一个全局组件 但是放在vue内就变成了 vue的一个 子组件同理，放在其他的vue对象内 就变成了其他vue对象的子组件 -->
<first v-for="(item, index) in items" :key="index"></first>
<!-- 尽量不要有大写字母有的话，使用标签时格式为 getItem ==> get-item -->
<!-- get-item声明在 vue对象内 只能在 vue 内使用-->
<get-item></get-item>
</main>
16 特殊组件 专门针对于表格
<!-- 正确写法 -->
<main id="vue">
<table>
<tr is='first-com'></tr>
</table>
</main>
<!-- 程序在加载的时候 先加载组件 组件加载完毕后加载标签 -->
<script id="first" type="text/html">
<tr>
<th>hello world</th>
</tr>
</script>
Vue.component('firstCom',{
template:'#first',
})
17组件的声明周期
<script>
Vue.component('first',{
template:'#firstM',
data() {
return {
}
},
//声明周期钩子函数
beforeCreate() {
console.log('在组建创建之前调用 *****常用')
},
created() {
console.log('在组建创建完成是调用')
},
// Mount加载
beforeMount() {
console.log('在组件加载之前调用')
},
mounted() {
console.log('在组件加载之后调用 ****常用')
},
// destroy 摧毁
beforeDestroy() {
console.log('在组件摧毁之前调用')
},
destroyed() {
console.log('在组件摧毁之后调用')
},
})
new Vue({
el:"#vue",
data:{
show:false
},
beforeUpdate() {
console.log('在组件内容更新之前调用 vue对象就是一个组件 ？？？内容范围')
},
updated() {
console.log('在组件的内容更新之后调用')
},
})
</script>
18 父组件传给子组件值
1.:pass='message',
2. // 接收父组件传递的值 接收pass属性的值
props:['pass']
19.子组件接收值并且修改但不影响父组件
1.:pass='message',
2. // 接收父组件传递的值 接收pass属性的值
props:['pass']
3.data() {
return {
passValue:this.pass,
}
}
4.改变passValue即可
20子组件接收值并且修该父组件的值
1.:pass='message',
2. // 接收父组件传递的值 接收pass属性的值
props:['pass']
3.data() {
return {
passValue:this.pass,
}
}
4.this.$emit('man', ++ this.passValue) 参数1为所取的事件名 参数2为所传的值
5. @man='outWoman'
6.outWoman(value){
console.log(value)
this.num = value
}// value即为所传的值
21 非父子之间的传值
// 1.创建代理组件
var delegateVue = new Vue({})
// 2.代理组件发射当前组件的message值
// $emit('参数1','参数二')
// 参数1:创建的事件名称
// 参数2:传递的值
delegateVue.$emit('passValue', this.message)
// 3.接收（必须在mouted内）
代理组件(delegateVue)从非父子的组件传递的值 value为传递过来的值
// $on('参数1',fn(value){})
// 参数1为 所起的事件名字
// fn(value){} value为传递过来的值
delegateVue.$on('passValue',function(value){
that.info=value
})
## 22 自定义指令
1. //创建自定义标签
Vue.directive('标签名',{
inserted(el,data){
console.log(el)//当前标签名
console.log(data)//自定义标签对象
},
bind(el,data){
}
//
// inserted bind都为自定义指令的声明周期钩子函数 inserted可看为beforeCreated
bind可看为mounted
})
23.插槽
<main id="app">
<first>
<!-- 插槽 -->
<ul>
<li v-for="(item , index) in messageList" :key="index" v-text='item'></li>
</ul>
</first>
</main>
<!-- 插槽引用 -->
<slot></slot>
24 具名插槽
<!-- 1.插槽具名 不能有外标签-->
slot="a"
<!--2. 插槽具名引用 -->
<slot name='a'></slot>
25路由
<!-- 引入vue.js vue-router.js -->
<!-- 1.接口配置 -->
<script id="home" type="text/html">
// 2.引入接口配置
var home = {
template: "#home"
}
//3.将路径和内容绑定在一起
var routerList = [
{
path: '/home',
component: home
},
]
//4.创建路由 配置路由
var router = new VueRouter({
routes: routerList
})
//5.注册路由
new Vue({
el: "#app",
data: {
},
// 5注册路由
router: router
})
// <!--6.调用router router-link会变为a标签 to跳转到'/'-->
<router-link to="/home">
首页
</router-link>
<router-view></router-view>
26 promise使用
// 当非promise对象调用then方法 会返回一个状态为resolve的promise对象
// 然后使用这个promise对象来调用then方法
resovle(data) reject(err) 相当于then(function(data){},function(err){})
一一对应
var p1 = new Promise(function (resovle, reject) {
if (Math.random() < 0.5) {
resovle('success')
}
else {
reject('fail')
}
})
p1.then(function () {
console.log(1)
var p2 = new Promise(function (resovle, reject) {
if (Math.random() < 0.5) {
resovle('success')
}
else {
reject('fail')
}
})
return p2
// 当非promise对象调用then方法 会返回一个状态为resolve的promise对象
// 然后使用这个promise对象来调用then方法
}, function () {
console.log(2)
}).then(function(){
console.log(3)
},function(){
console.log(4)
})
27 ref查看对象
获取当前的h1标签
赋值
<h1 ref="lisi" @click="getObj">nice</h1>
获取
this.$refs.lisi
28minix混入
公共方法
var methodObj = {
methods: {
getObj() {
console.log(this.$refs)
}
},
}
方法混入
mixins: [methodObj]
