Vue基础及进阶

一、 Vue基础

1. 模板语法

1.1数据绑定

1.1.1文本，v-text、{

在mustache语法中，是可以使用加减乘除运算符的

	<div id="app">
		<div>
			{{uage *2}}
		</div>
		<div v-text="uage"></div>
	</div>

<script>
	const app = new Vue({
		el:'#app',
		data:{
			uage:10
		}
	})
</script>

1.1.2 v-once：

只将数值绑定一次

	<div id="app">
		<div v-once>
			{{uage}}
		</div>
	</div>

1.1.3v-pre:

将标签内的内容不编译进行渲染

	<div id="app">
		<div v-pre>
			{{uage *2}}
		</div>
	</div>

1.1.4v-cloak:

使数据加载之后才渲染页面

	<div id="app">
		<div v-cloak>
			{{uage *2}}
		</div>
	</div>

原理：在vue数据加载之前，标签中有v-cloak这个属性，阻止元素的显示，数据加载之后，驱动页面渲染，元素上就没有v-cloak这个属性了

1.1.5 v-html

插入带html的字符

	<div id="app">
		<div v-html ='url'>
		</div>
	</div>

<script>
	const app = new Vue({
		el:'#app',
		data:{
			uage:10,
			url:'<a href="http://www.baidu.com">ddd</a>'
		}
	})
</script>

1.1.6v-bind：

动态绑定属性值

语法糖：:

	<div id="app">
		<a v-bind:href= "url">
			我是百度
		</a>
	</div>

<script>
	const app = new Vue({
		el: '#app',
		data: {
			uage: 10,
			url: 'http://www.baidu.com'
		}
	})
</script>

扩展使用:绑定class

文件css
		.active {
			color: red;
		}

		.uncheck {
			color: yellow;
		}
		.green{
			color: green;
		}
文件js
<script>
	const app = new Vue({
		el: '#app',
		data: {
			isActive: true,
			isUncheck: false

		},
		methods: {
			btnClick: function () {
				this.isActive = !this.isActive,
					this.isUncheck = !this.isUncheck

			},
			getClass:function(){
				return  {active:this.isActive,uncheck:this.isUncheck}
			}
		}
	})
</script>
用法一：直接使用{}绑定一个class
		<div :class={active:true}>
			我是直接绑定的样式
		</div>
用法二:使用变量传入boolean类型控制多个class是否生效
		<div @click="btnClick" :class="{active:isActive,uncheck:isUncheck}" >
			我要变色了
		</div>
用法三：与其他class共同使用，样式冲突的情况下以到单独写的class为主
		<div @click="btnClick" :class="{active:isActive,uncheck:isUncheck}"class="green" >
			我要变色了
		</div>
用法四：如果过于复杂，可以放在一个methods或者computed中
		<div @click="btnClick" v-bind:class="getClass()" >
			我要变色了
		</div>
//调用方法的时候可以选择不加括号 
使用数组绑定class：
		<div :class= "['green','fontClass']" class="active" >
			我绑定了好几个class哦~
		</div>
这样驻足绑定的方法可以使用data中的变量，也不与单独写的class冲突
但是在渲染的时候，是优先渲染内联class，所以如果有样式重叠，绑定的样式会覆盖掉内联class，截图如下：

v-bind绑定style
```
		<div :style="{fontSize:'30px'}">我绑定了style</div>
		<div :style="{color:color,fontSize:fontSize+'px'}">我也绑定了style</div>
```
```
		data: {
			color: "red",
			fontSize:30

		},
```
注意事项：
1. 格式为：style= "{属性名:属性值}"
2. 如果属性值是类似font-size带有-的属性值都要转换为fontSize，否则会报错
3. 属性值如果直接写数值要加''，如果是变量则不用加

        computed: {
            fullName:function(){
                return this.firstName + ' ' + this.lastName;
            }
        },

1.1.7v-model

在表单上创建双向绑定，v-model会忽略所有表单元素的value，checked，selected属性初始值，而选定Vue实例数据为具体值。

<body>
    <div id="app">
        <input type="text" v-model = "userName">
        <p>{{userName}}</p>
    </div>

</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            userName:"hong"
        }
    })
</script>

1.1.7.1model修饰符

.lazy

默认情况下v-model是实时同步输入框的值和数据，加上.lazy后变为触发change时间后再同步（即相当于修改后要按下回车，或点击其他位置后才触发数据同步）
```
<input type="text" v-model.lazy = "userName">
```
.number

将用户输入的内容转化成数值类型，转化规则与js的Number()的规则相同

详见w3shool的JS数据类型转换
```
<input type="text" v-model.number = "userName">
```

.trim

过滤掉输入框的首位空格

<input type="text" v-model.trim = "userName">

1.2事件绑定

1.2.1 v-on

作用：绑定事件监听器

语法糖：@

参数：event

1.2.1.1基本使用

使用v-on绑定事件

一个元素上可以绑定多个不同的事件
事件的绑定也可以通过methods中定义函数的方法来实现绑定
当定义的事件没有参数，所以我们在调用方法的时候不需要添加()

<body>
    <div id="app">
        <p>{{total}}</p>
        <!-- 一个元素上可以绑定多个不同的事件 -->
        <div class="div1" @mouseout = "total++" @click = "total--"></div>
        <!-- 事件的绑定也可以通过methods中定义函数的方法来实现绑定 -->
        <!-- 因为现在定义的事件没有参数，所以我们在调用方法的时候不需要添加() -->
        <button v-on:click = "reduce">-</button>
        <button v-on:click = "increase">+</button>
    </div>

</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            total:1
        },
        methods:{
            // 定义total增加的函数
            increase(){
                this.total++;
            },
            // 定义total减少的函数
            reduce(){
                this.total--;
            }

        }
    })
</script>

1.2.1.2事件监听传参

当方法需要参数但未传递实参，会将event对象当成默认参数返回
正常传递参数
当需要传递其他参数和event的时候，需要借助$event实现

<body>
    <div id="app">
        <!-- 省略参数，会将event事件当成默认的参数返回 -->
        <button @click = "clickBtn">按钮</button>
        <!-- 传递所需参数 -->
        <button @click = "clickBtn1('sss')">按钮</button>
        <!-- 同时传递需要的参数和event，使用vue封装的$event进行传参 -->
        <button @click = "clickBtn2(123,$event)">按钮</button>
        
    </div>

</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            clickBtn(){
                console.log(event);
            },
            clickBtn1(a){
                console.log(a);
            },
            clickBtn2(a,event){
                console.log(a,event);
            }

        }
    })
</script>

1.2.2 v-on的修饰符

.stop调用了event。stopPropagation()
.prevent调用event.preventDefault()
.{keyCode|keyAlias}是事件只从特定按键触发时才触发回调
.native 监听组件根元素的原生事件
.once 只触发一次回调

        <!-- 阻止冒泡 -->
        <button @click.stop = "clickBtn">按钮</button>
        <!-- 阻止默认行为 -->
        <button @click.prevent = "clickBtn">按钮</button>
        <!-- 阻止默认行为，没有表达式 -->
        <form @submit.prevent></form>
        <!-- 串联修饰符 -->
        <button @click.stop,prevent = "clickBtn">按钮</button>
        <!-- 按键别名，键盘上的名称 -->
        <input @keydown.+ = "onEnter">
        <!-- 按键代码，按键对应的代码数字 -->
        <input @keydown.13 = "onEnter">

1.2.2 v-if、v-else、v-else-if

1..2.2.1 v-if、v-else

v-if与js的if用法相同，是通过v-if = ""引号中的Boolen值去进行判断，如果为false就隐藏元素是true就显示

<body>
    <div id="app">
        <div v-if="isShow">true</div>
        <div v-else>false</div>
        <button @click="changeClick">切换</button>

    </div>

</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            isShow: true
        },
        methods: {
            changeClick() {
                this.isShow = !this.isShow;
            }
        }
    })
</script>

1.2.2.2v-else-if

用处不多，不赘余

    <div id="app">
        <div v-if="score >90 ">优秀</div>
        <div v-else-if="score >80 ">良好</div>
        <div v-else-if="score > 60">及格</div>
        <div v-else>不及格</div>
    </div>

1.3 v-for循环遍历

用法与for…in相同，详见w3school的for…in介绍

1.3.1循环数组

1.3.1.1无索引循环

<body>
    <div id="app">
        <ul>
            <li v-for = "item in names" v-block>{{item}}</li>
        </ul>
    </div>

</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            names:["h","w","l","g","z"]
        },
        methods: {
        }
    })
</script>

1.3.1.2 有索引循环

加一个小括号，里面加上item和index

        <ul>
            <li v-for = "(item,index) in names" v-block>{{index}}----{{item}}</li>
        </ul>

1.3.2对象循环遍历

1.3.2.1无key无索引遍历

<body>
    <div id="app">
        <ul>
            <li v-for = "item in names" v-block>{{item}}</li>
        </ul>
    </div>

</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            names:{
                name:"hong",
                age:18,
                sex:"男"
            }
        },
        methods: {
        }
    })
</script>

1.3.2.2有key无索引遍历

        <ul>
            <li v-for = "(item,key) in names" v-block>{{key}}------{{item}}</li>
        </ul>

1.3.2.2有key有索引遍历

 <ul>
  <li v-for = "(item,key，index) in names" v-block>{{key}}------{{item}}-----{{index}}</li>
</ul>

1.4(了解)如何正确使用key

v-for使用时，为了能够更好的复用，我们

2.计算属性

2.1基本使用

    <div id="app">
        <div>{{fullName}}</div>
    </div>

        data: {
            firstName: 'zhang',
            lastName: 'san'
        },
        computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        },

3.ES6语法

对象的增强语法

ES5的创建方法

var a = new Object();
a.sname = "hong";

var a = {
    sname = "hong"
}

ES6语法

const sname =  "hong";
var a = {
    sname,
}
//在es6的语法中，上面写法会吧sname当成key，将变量sname的值赋值给它

posted @ 2020-09-14 14:50 H_pig 阅读(49) 评论(0) 编辑收藏举报

刷新页面返回顶部

H_pig的后花园

请随意践踏···