一。Vue.js 链接引入
vue.js下载安装地址 https://vuejs.org。
CDN链接建议手动更新的特定版本号，现在官网的最新CDN如下：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
二。实例化Vue对象（初始化Vue）
实例化vue.js 框架代码结构：
new vue（{ new vue 里面是对象，括号里面一定要用大括号
el：“ ”， el：“html根容器元素 ”，
data：{
}，
}）；
注释：el：element 需要获取的元素，一定是html中的根容器元素。
data： 用于数据储存。
三。数据和方法
methods：{
}
注释：methods： 用于储存方法。
结合上面拆分的Vue结构代码：
new vue（{
el：“ ”，
data：{
}，
methods：{
}
}）；
四，综上Vue基础结构框架和index.html结合实例：
Html 代码
<div id="vue-app"> 注释：vue-app是根容器
<h1> {{ qwe('世界')}}</h1>
<h2>{{name}}</h2>
<a v-bind:href="wangzhan">Vue.js</a>
<p v-html="wangzhi"></p>
</div>
vue.js代码
new Vue({
el:"#vue-app",
data:{
name:"我的第一段 Vue.js",
wangzhan:"https://vuejs.org",
wangzhi:" <a href='https://vuejs.org'>Vue.js</a>"
},
methods:{
qwe:function(asd){
return '你好' + asd + '!';
}
}
});
上面的代码我们将在网页上面看到如下效果：
五，属性绑定，事件，鼠标点击事件
v-bind：
v-html：
data-binding： 给属性绑定对应的值。
在JS方法里面我们如下一段代码：
<div> id="vue-app" new vue({
<h1> Events</h1> el:"vue-app";
<button v-on:click="age++">涨一岁</button> data:{
<button v-on:click="age--">减一岁</button> age:"22"
<p>My age is {{ age }}</p> },
</div> methods:{
})
上面我们使用JS的方法可以实现 当我们点击“涨一岁”的时候 年龄22会增加1 当我们点击“减一岁”的时候。年龄22会减少1
当我们使用Vue的方法如下实现 ：
<div id="asd">
<h1> Events </h1>
<button v-on:click="add(1)">涨一岁</button>
<button v-on:click="subtract(1)">减一岁</button>
<button v-on:dblclick="add(10)">涨十岁</button>
<button v-on:dblclick="subtract(10)">减十岁</button>
<p> My age is {{age}}</p>
</div>
new Vue({
el:"#asd",
data:{
age:"22"
},
methods:{
add:function(inc){
this.age+=inc;
},
subtract:function(dec){
this.age-=dec;
},
}
})
我们使用Vue的方法同样可以得出和JS方法一样的结果，但是我们又加了 v-on:dblclick 这个代码 这个鼠标点击事件鼠标将点击两次才会出现的效果，把我们的年龄变化绑定在了按钮上面。
六，事件修饰符，键盘事件及键值修饰符
.stop 停止事件
.prevent 阻止默认事件
.capture 捕获事件
.self 自身事件
.once 执行一次事件
.passive 被动事件
.enter
.tab
.delete(捕获“Delete”和“Backspace”键)
.esc
.space
.up
.down
.left
.right
下面两个代码一个使用的是事件修饰符，一个没使用，但是两个代码的效果是一样的：
一，<span v-on:mousemove="stopMoving">stop Moving</span> stopMoving:function(event){
event.stopPropagation();
}
二， <span v-on:mousemove.stop="">stop Moving</span>
七，双向数据绑定
一定是三个方法 input / select / textarea （输入 选择 ）
<div id="vue-app">
<h1> 键盘 Evevt</h1>
<label>姓名:</label>
<input ref="name" type="text" v-on:keyup="logName">
<span>{{name}}</span>
<label>年龄:</label>
<input ref="age" type="text" v-on:keyup="logAge">
<span>{{age}}</span>
</div>
上面代码我们为了绑定 span 我们要用到 ref 这个代码，为了让我们在input输入进去的代码，在span中输出，显示出来，下面的vue就要用到 this.name = this.$refs.name.value;
new Vue({
el:"#vue-app",
data:{
name:"",
age:""
},
methods:{
logName:function(){
this.name = this.$refs.name.value;
},
logAge:function(){
this.age = this.$refs.age.value;
}
},
})
这样我们就将 input和span 绑定在一起，实现了在input输入，span输出也可以看见
网友评论