Vue的使用

  • vue可以单独引入使用,也可以构建应用时利用npm安装

　　单独引入 ---------

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

 

　　利用npm下载安装(linux命令行使用,前提是你已经安装了npm,如何安装,自行百度,老多了)

$  npm install vue
  • 开始建立第一个自己的vue实例吧

　　在引入vue.js文件之后,开始创建一个vue实例

var app = new Vue({
   el: "#app",  //这是挂载点     
   data: {
        msg: "Hello World !"     
    }     
})

　　html代码

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

　　此时,浏览器打开页面,你回发现已经显示msg对应的内容,

　　在实例外修改对应的值也会更改vue事例中data的属性,

　　eg: 　app.msg = "This is new msg"

　　刷新页面会显示新的数据

  • 说到这里data值在实际开发都是利用return对象的格式(vue也支持es6的写法,还有typescript,自行看文档)
new Vue({
   el: "#app",
   data () {
        return {
            msg: "Hello World !"
        }        
   }   
})

　　这是简单的利用vue的模板写了一个实例,vue中有很多指令:

  1. v-text     将对应v-text中的值写入指定的节点中
<p v-text="这是第一个指令"></p>

　　　　页面渲染的时候就会将其中内容能够渲染到p标签中

　　  2. v-once    通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

　　　　例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
　　<div id="app">
　　　　{{msg}}
　　　　<p v-once>{{msg}}</p>
　　</div>
</body>
<script>
　　var app = new Vue({
　　　　el: "#app",
　　　　data: {
　　　　　　msg: "Hello World !"
　　　　}
　　})
　　app.msg = "变变变~~~"
</script>
</html>

　　　此时在网站打开后显示的分别是   变变变~~~  和  Hello World !      此时你应该知道他的作用了....

        3.v-html

　　　　这个指令容易遭受xss攻击注入,(我几乎没玩过,就不说了)

　 　4.v-bind(可以简化   :   使用)

　　　　这个指令主要是绑定属性,例如class,就可以动态添加class

//样式代码
<style type="text/css">
　　#app{
　　　　box-shadow: 2px 2px 2px 2px #666;
　　}
    .isRed{
	color:red;
    }
</style>

//html中代码
<div id="app">
    {{msg}}
    <p v-once>{{msg}}</p>
    <div :class="isRed">54651</div>      <!--   :class 是 v-bind:class 的简写   -->
</div>

//js代码
<script>
	var app = new Vue({
		el: "#app",
		data () {
			return {
				msg: "Hello World !",
				isRed: "isRed"
			}
		}
	})
	app.msg = "变变变~~~"
</script>

　显示效果如下:

　　5.v-on (可以简写为  @   )

　　事件指令eg:    @click=""   或者  v-on:click=""

html代码:
<div id="app">
	{{msg}}
	<p v-once>{{msg}}</p>
	<div :class="isRed" @click="firstEvent">54651</div>
</div>

js代码:
<script>
	var app = new Vue({
		el: "#app",
		data () {
			return {
				msg: "Hello World !",
				isRed: "isRed"
			}
		},
		methods: {
			firstEvent () {
				alert('v-on事件')
			}
		}
	})
	app.msg = "变变变~~~"
</script>

　　此时点击红色字体部分将会弹出对应的弹出框....

　　6.v-if / v-else-if /v-else

　　这里需要注意到是在这三个指令使用的时候必须紧凑连着使用,否则你将会找不到哪里出问题...哈哈(这是一个坑)

<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>

　　这是正确的使用方式,如果每个div中间插了一个其他dome节点就是报错,不妨可以试试

　　7.v-show

　　值和v-if等一样为boolean类型,用来显示或者隐藏

　　8.v-for

　　是用来循环的,你可以循环数组,对象(看自己实际开发使用)

　　9.v-model

　　这是数据双向绑定的指令

<input type="text" v-model="upData">
<div>{{upData}}</div>

　　这时你在输入框输入的值都会同步更新到div中(当然先将对应的数据绑定到data中)

　　还有好多...用到的不是很多,暂时不提