第四篇-后端人员学习vue(常用语法)
1.前言
我们对vue有了一个大致的印象之后，我们现在巩固一下vue常用的语法，然后我们怎么跟好的把vue.js整合到我们后台里去，方便我们对数据的处理：展示。我们不需要直接操作dom，vue实例会监听到数据的改变，自动对dom进行更新，页面也自动发生了改变。
2.{{msg}}（插值表达式）
<html>
<head>
<title>vue学习title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="root">{{msg}}div>
body>
<script>
var my_vue = new Vue({
el:"#root",
data:{
msg:"hello world"
}
})
script>
html>3.@click点击事件
<html>
<head>
<title>vue学习title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="root">
<h1 @click="changeClick">{{msg}}h1>
div>
body>
<script>
var my_vue = new Vue({
el:"#root",
data:{
msg:"hello world"
},
methods: {
changeClick: function(){
this.msg= "我改变了"
}
}
})
script>
html>4.v-model属性绑定
这个在我们后台也是经常用的，比如我们的form表单里。然后ajax提交给后台。
<html>
<head>
<title>vue学习title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="root">
<form>
<input v-model="name"/>
<input v-model="pwd"/>
<div>{{name}}div>
<div>{{pwd}}div>
form>
div>
body>
<script>
var my_vue = new Vue({
el:"#root",
data:{
name:"superboycxx",
pwd:"123456"
}
})
script>
html>5.computed-计算属性，watch-侦听器
<html>
<head>
<title>vue学习title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="root">
<form>
<input v-model="name"/>
<input v-model="pwd"/>
<div>{{userJson}}div>
<div>{{count}}div>
form>
div>
body>
<script>
var my_vue = new Vue({
el:"#root",
data:{
name:"superboycxx",
pwd:"123456",
count:0
},
computed:{
userJson:function(){
return this.name +","+ this.pwd
}
},
watch:{
userJson:function(){
return this.count++
}
}
})
script>
html>6.v-if和v-show
v-if和v-show来控制元素的显示与否，二者的区别在于：当传入的显示值是false时，v-if会在页面上将控制的dom删除掉，而v-show会改变dom的css为display：none
<html>
<head>
<title>vue学习title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="root">
<div v-if="show">v-if testdiv>
<div v-show="show">v-show testdiv>
<button @click="handleClick">clickbutton>
div>
body>
<script>
var v1 = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
script>
html>7.v-for来循环展示list
<html>
<head>
<title>vue学习title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="root">
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}li>
ul>
<ul>
<li v-for="item in list">{{item}}li>
ul>
div>
body>
<script>
var v1 = new Vue({
el:"#root",
data:{
list:[1,2,3]
}
})
script>
html>其中item表示循环中具体的每一项元素，index表示该元素的下标，这里我们需要为循环体指定一个key属性以提高渲染的效率，这里使用index作为key的值（实际上这不是一个好的选择）
8.组件
在Vue中，组件就是实例，实例就是组件。组件之间也是可以互相通信的。可以使用下面的代码定义一个全局组件：
<html>
<head>
<title>vue学习title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="root">
<cxx-item>cxx-item>
<h1 v-html="html">h1>
<h1 v-text="html">h1>
div>
body>
<script>
Vue.component('cxx-item',{
template: 'click'
})
var v1 = new Vue({
el:"#root",
data:{
list:[1,2,3],
html: 'hello world
'
}
})
script>
html>9.实战
在input框中输入内容，点击提交之后，就会以ul的形式展示出来，当点击ul中的li时，就会将其删除掉。
。。
。。
。。
。。
。。
首先我们使用v-model指令将input框的值和vue实例v1中的inputValue进行了双向绑定，然后提供了提交按钮的click事件和方法。然后我们定义了名为’todo-item’的组件，在其中定义了其模板是一个li标签，并对其进行了v-for循环。在todo-item元素中，我们给了他一个属性content其值为item，也就是循环的list中的元素，而这个content元素是通过父组件传给他的，所以需要写成：content（我们可以认为id=”root”的div为父组件，而todo-item为子组件），同样的，父组件通过index属性将循环中的index传给了子组件。而子组件想要接收content和index这两个属性，就需要在props中定义（props:[‘content’,’index’]）而这就是父子组件之间的通信：父组件将值以属性的形式传给子组件。然后，子组件再其模板中将content元素以差值表达式的形式显示出来。这样我们就实现TodiList的添加功能。
而要实现TodoList的删除功能，我们首先需要明确，其实我们就是通过子组件的click事件，将自己的下标告诉父组件，然后在父组件中将list中的对应下标的一项删掉即可，而这就是父子组件之间的通信：子组件将值传给父组件。这里我们需要用到发布/订阅模式，在子组件的每一个li中，我们已经从父组件那里接收到了自己的index值，所以只需要定义一个handleClick方法，在这个方法中，我们使用发布模式（this.$emit(‘delete’,this.index)），以delete为标记，将index值发布出去。而在父组件中，通过@delete的形式发起订阅，当监听到delete的发布之后，调用父组件自身的handleDelete方法，然后在该方法中将list中对应的元素删除即可。
<html>
<head>
<title>vue学习title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交button>
div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete">todo-item>
ul>
div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'{{content}} ',
methods:{
handleClick:function(){
this.$emit('delete',this.index); //发布 标志为delete
}
}
})
var v1 = new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit:function(){
if(this.inputValue.trim() == ""){
alert("请输入内容");
this.inputValue = "";
return ;
}
this.list.push(this.inputValue);
this.inputValue="";
},
handleDelete:function(index){
alert(index)
this.list.splice(index,1);
}
}
})
script>
body>
html>