vue的使用
新建Vue对象
引用vue.js
在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址 https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
新建Vue实例
在Vue.html中插入一个id为app的
<div id="app">div>
在Vue.html中插入下面js代码:
然后整个代码看起来是这样的:
<html>
<head>
<title>Vue Demotitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
div>
body>
<script type="text/javascript">
var myVue = new Vue({
el: "#app"
})
script>
html>
解释一下代码
js变量 myVue 就是Vue创建的一个对象，可以理解成把
这个双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式出现的。
然后在创建 vue实例的代码中加入下面数据声明:
data:{
my_data: "你好啊"
}
整个代码看起来向下面这样:
<html>
<head>
<title>Vue Demotitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
{
{my_data}}
div>
body>
<script type="text/javascript">
var myVue = new Vue({
el:"#app",
data:{
my_data: "你好啊"
}
})
script>
html>
data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔，上面我们绑定了自定义变量my_data，并赋初值’test’
完成数据绑定工作，
这是在HTML标签内部的数据绑定，那么如果想绑定某个HTML标签的属性值，就要用到v-bind:属性了，比如我想绑定一个标签是否可见的属性(hidden)，那么就应该这么写:
<div id="app" v-bind:hidden="my_hidden">{
{my_data}}div>
v-bind:后面写想要绑定的属性，my_hidden也不需要用两个大括号括起来了，直接写就可以了，然后在VUE实例中声明这个绑定数据
var myVue = new Vue({
el:'#app',
data:{
my_data: "test",
my_hidden: "hidden"
}
})
这时候再浏览这个网页,又变成了空白，但是F12查看源代码，发现其实是div标签的hidden属性被激活了
当然，v-bind:不仅可以绑定hidden属性，disabled属性，style属性, color属性，凡是标签有的属性，都可以通过这个方法进行绑定
v-bind由于经常会用到，所以也可以缩写成冒号:，比如上面的div标签就完全可以这样写
<div id="app" :hidden="my_hidden">{
{my_data}}div>
这是和v-bind:hidden="my_hidden"完全等价的一种写法
至此，Vue.js两种绑定数据的方法都写完并进行了测试
事件绑定
v-bind:是用来绑定数据的，v-on:则是用来绑定事件的，比如我要绑定一个button的 click事件就这么写
<button v-on:click="clickButton()">Click Mebutton>
当然这里的click可以换成任意一个html事件，比如load , doubleclick , mouseon , mousedown这些，不过click肯定是我们最常用的
将click动作绑定到clickButton()函数之后就需要实现这个函数了,我们要在之前的vue实例中加入新字段methods
var myVue = new Vue({
el:'#app',
data:{
my_data: "你好",
my_hidden: "hidden"
},
methods:{
clickButton:function(){
this.my_data = "我不好"
}
}
})
我们在methods关键字里面定义了clickButton方法，并在方法内改变了之前定义的my_data变量的值
这里涉及到如何在vue实例中引用data字段的变量，如上所示，需要加this后面直接写要引用的变量就可以了
如果不加this，系统会默认你想引用的是一个全局变量，可是这里我们需要引用的是这个vue实例里的局部变量
现在整体代码和之前有些变化，看起来是这样的：
<html>
<head>
<title>Demotitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<button v-on:click="clickButton">点击button>
<p>{
{my_data}}p>
div>
body>
<script type="text/javascript">
var myVue = new Vue({
el:'#app',
data:{
my_data: "你好啊",
my_hidden: "hidden"
},
methods:{
clickButton:function(){
this.my_data = "我不好"
}
}
})
script>
html>
好了，运行一下，点击Click Me的时候"test"就会变成"Wow! I’m changed!"，这是因为变量my_data的改变。
另外，v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click=“clickButton”
表单控件绑定
之前有说Vue这个框架是单向数据传输的，就是从vue实例传送数据到DOM ，那么我们如何从DOM中实时获取用户输入的数据赋值给vue实例呢
这用到了Vue.js提供给用户的一个语法糖 v-model ,这个语法糖通过两步实现了数据的反向传递，也就是从DOM传送给vue实例数据。
下面说的原理看不懂可以跳过，不会影响后续阅读
v-model 通过两步实现了数据反向传递
第一步，绑定了DOM标签的input事件(比如叫tapInput())
第二步，当用户进行输入时候，触发tapInput()函数，tapInput()函数内部读取此DOM标签的Value值，赋值给vue实例
通过以上两步，v-model语法糖实现了vue数据的反向传输
<html>
<head>
<title>Vue Demotitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="my_data" />
<button v-on:click="clickButton">点击button>
<p>{
{my_data}}p>
div>
body>
<script type="text/javascript">
var myVue = new Vue({
el:'#app',
data:{
my_data: "你是猪",
my_hidden: "hidden"
},
methods:{
clickButton:function(){
this.my_data = "不是"
}
}
})
script>
html>
可以发现，我们增加了一个标签，并且用v-model语法绑定了之前定义的变量my_data
这个时候，当我们在输入框输入值的时候，v-model会实时将最新值(value)赋值给vue实例的my_data变量，而my_data变量又将实时展现在
标签中
这样我们看起来实现了这么一个数据流:
DOM1(input标签)——>VUE——>DOM2(p标签)
先从用户输入的DOM1获取输入保存在VUE实例，用从VUE实例里拿到数据输出到DOM2
运行这个页面，发现
标签中的内容会随着标签实时的变化，说明我们利用v-model语法变相实现了数据的双向传递
总结
用 new Vue({})新建vue实例
使用 v-bind:和{ {}}双大括号语法在html中绑定变量
使用 v-on: 和 @ 语法绑定函数到标签的事件
使用 v-model: 语法使用户的页面输入反向传递回vue实例变量
现在简单完善一下上面的代码，做成一个计数器程序，用户可以在输入框输入任意数字，点击按钮进行总数累加
下面是对刚才代码进行了一些小的改动，相信你一定可以看明白的
<html>
<head>
<title>Vue Demotitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="number" v-model.number="my_step" />
<button v-on:click="clickButton">添加button>
<p>{
{my_total}}p>
div>
body>
<script type="text/javascript">
var myVue = new Vue({
el:'#app',
data:{
my_step: 1,
my_total: 0
},
methods:{
clickButton:function(){
this.my_total = this.my_total + this.my_step
}
}
})
script>
html>
上面v-model.number后面的这个.number的意思是说在返回my_step值的时候自动转换成integer类型，因为默认是string类型，所以要多这么一句。