准备工作：首先要安装npm，之后最好在安装cnpm 然后换国内源，最后安装vue-cli
准备好以后可以安装vue了
#npm install --global vue-cli // npm install -g vue-cli
#vue init webpack project_name // 创建一个基于webpack的新项目
#cd project_name && npm install // 安装依赖
#npm run dev //运行调试
Eslint 代码检查：Use Eslint to lint your code(Y/n)? n 。 由于严格的代价检查，对学习不利， 学习的时候建议不安装，开发环境可以安装
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" oncont="ie=edge">
<title>Lesson one</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.inner {
width:500px;
height: 3.125rem;
padding:10px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ msg2 }}</p>
<child @sendmsg="getmsg" :parentnum="num"></child>
<p>父组件显示 子组件传递的数据 => {{info}}</p>
</div>
<template id="tpl">
<div>自组件里面的消息<button @click="sendmsg"> sendmsg </button>
</div>
</template>
<script>
var tpl = {
template: "#tpl",
props:[
"parentnum"
],
methods: {
sendmsg(event) {
alert(this.parentnum)
this.$emit("sendmsg", this.parentnum)
}
},
}
var vm = new Vue({
el: "#app",
data: {
msg: "This is msg",
msg2: "Here is msg2",
info: "",
num: 110
},
components: {
child: tpl
},
methods: {
getmsg(data=""){
this.info = "来自son发送来的消息 =>" + data
}
}
})
</script>
<div id="app2">
<!-- 解决插值表达式闪烁的问题 ： v-cloak -->
<p v-cloak>{{ msg }} </p>
<!-- v-text 会覆盖元素中原本的内容 -->
<h3 v-text="vtext">Here will be replaced by vtext</h3>
<div>{{ msg2 }}</div>
<div v-text="msg2">original msg2</div>
<div v-html="msg2">v-html</div>
<hr>
<h2>v-bind: 用于绑定属性的指令，可以简写为 ":attribute", v-bind中可以写合法的js表达式</h2>
<input type="button" value="Button" v-bind:title="mytitle" />
<input type="button" value='简写v-bind :title="mytitle"' :title="mytitle" />
<input type="button" value="===Button===" :title="mytitle + '---后面接上字符串'" />
<hr>
<h2>v-on: 事件绑定,v-on:event,如：v-on:click; 简写方式: @click</h2>
<input type="button" value="v-on button" :title="mytitle" v-on:click="show" />
<input type="button" value="v-on simple by @" :title="mytitle" @click="simpleShow" />
</div>
<script>
var vm2 = new Vue({
el: "#app2",
data:{
msg: "This is app2",
msg2: "This is msg2 in app2",
vtext: "v-text replace original content",
mytitle: "自定义title"
},
methods: { // methods 属性中定义了当前Vue实例所有可用的方法
show: function(){
alert("v-on:click=show ")
},
simpleShow: function(){
alert("v-on:click short to @click")
}
}
})
</script>
<hr>
<h2>.stop / .prevent / .self / .capture / .once</h2>
<div id="app3">
<div class="inner" @click="div1Handler">
.stop 阻止冒泡 <input type="button" value="Button in div" @click.stop="btnHandle" />
</div>
.prevent 阻止默认行为<a href="http://www.baidu.com" @click.prevent="linkClick">.prevent at link dom</a>
<div class="inner" @click.capture="div1Handler">
.capture 实现捕获触发事件,先执行外层事件 <input type="button" value=".capture button" @click="btnHandler" />
</div>
.self 只有点击当前元素的时候，才会触发事件处理函数
<div class="inner" @click.self="div1Handler">
<input type="button" value=".self in div" @click="btnHandler"/>
</div>
.once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">.once</a>
.self .stop 区别：
.stop 阻止冒泡， .self 只有在点击自己时才会触发事件，阻止内层冒泡
</div>
<script>
var vm3= new Vue({
el: "#app3",
data:{
},
methods: {
div1Handler(){
alert("div1 Handler")
},
div2Handler(){
alert("div22222 handle")
},
btnHandler(){
alert("Button handle")
},
linkClick(){
alert("Prevent Link Click redirect")
}
}
})
</script>
</body>
</html>
网友评论