怎么安装环境就不多BB了, 安装node https://blog.csdn.net/Mr_xiaozhou/article/details/93925375
安装项目
cd到要安装项目的位置
vue init webpack 项目名npm installnpm install -g vue-clinpm run dev 启动项目
上面时cl2的,下面说说cli3的用法:
npm uninstall vue-cli -g 删除cli2
npm install -g @vue/cli 安装cli3
- cd 到项目目录
- vue create 项目名
- 根据需要操作,空格时确认, a全选, a取消全选
- npm run serve 启动
<div id="app">
{{ message }}
<p v-for i in list >{{ i }}</p>
<p v-for todo in todos >{{ todo.text }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
list: ["123", "456"],
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
},
methods:{
greet: function(time){
return 'Good' + time + this.name
}
}
})
数据绑定
<a v-bind:href="website">花Q</a>
不绑定不行
var vm = new Vue({
el : "#app4",
data : {
website: "http://desky.xyz"
},
渲染html
<p v-html="websiteTag"></p>
var vm = new Vue({
el : "#app4",
data : {
websiteTag: "<a href='http://desky.xyz'>花Q</a>"
绑定事件
<button v-on:click="age++">加1</button>
<button v-on:click.once="age--">减1 只有第一次点击才生效</button>
<p>{{age}}</p>
var vm = new Vue({
el : "#app4",
data : {
age: "22"
// age: 22 也行
实现age数值的变化
绑定个函数
<button v-on:click="add">加10</button>
<p>{{age}}</p>
var vm = new Vue({
el : "#app4",
data : {
age: 22
},
methods: {
add: function(){
this.age += 10
}
},
绑定鼠标事件
实现的就是在这个div 里面移动鼠标, 会自动获取鼠标的坐标, function(event) 这个enent是固定的
<div v-on:mousemove="updateXY" style="width: 500px; padding: 200px 20px; text-align: center; border: 1px solid #333;">
{{ x }} {{ y }}
</div>
var vm = new Vue({
el : "#app4",
data : {
x: 0,
y: 0
},
methods: {
updateXY: function(event){
this.x=event.offsetX;
this.y=event.offsetY;
}
},
阻止事件 .stop
<div v-on:mousemove="updateXY" style="width: 500px; padding:
200px 20px; text-align: center; border: 1px solid #333;">
{{ x }} {{ y }}
<span v-on:mousemove.stop="">鼠标悬停在这里只不会变化, stop后面不加函数名, 加了反而不行</span>
</div>
var vm = new Vue({
el : "#app4",
data : {
x: 0,
y: 0
},
methods: {
updateXY: function(event){
this.x=event.offsetX;
this.y=event.offsetY;
}
},
a标签实现函数不跳转
<a v-on:click="add" href="http://desky.xyz">フブキ</a>
<a v-on:click.prevent="add" href="http://desky.xyz">フブキ</a>
methods: {
add: function(){
alert("平気だ");
}
},
第一个标签, 弹完窗,会跳转
第二个标签, 弹完窗,不会跳转
监听键盘事件并实现数据的双向绑定
<input type="text" v-on:keyup="xx" ref="name"> 这个属性必须时ref
{{name}}
var vm = new Vue({
el : "#app4",
data : {
name: ""
},
methods: {
xx: function(){
this.name=this.$refs.name.value 还必须时$refs
}
下面时vue最正统双向绑定
v-model
<input type="text" v-model="name">
{{name}}
连函数都不用写
var vm = new Vue({
el : "#app4",
data : {
name: ""
},
关于方法和计算属性
方法
写在methods里的时非计算属性,是方法。
必须有返回值, 返回值是什么无所谓。
最关键的是data中的数据,被改变时,会重新加载dom,然后重新调用两个方法。
还有必须调用这个被改变得data<p>a {{a}}</p>
结果:
当a的值改变时,会调用两个方法,打印123和456
<button type="button" v-on:click="a++">add a</button>
<p>a {{a}}</p>
<p>{{ addToa() }}</p>
<p>{{ addTob() }}</p>
var vm = new Vue({
el : "#app4",
data : {
a: 0,
},
methods: {
addToa: function(){
console.log(123)
return "123";
},
addTob: function(){
console.log(456)
return "123";
}
},
计算属性
首先调用的时候不能加(),
可以不在页面显示改变的值
但是函数返回的必须是改变的值
结果:
当a改变时,打印123, 改变时打印456
<button type="button" v-on:click="a++">+a</button>
<button type="button" v-on:click="b--"> -b</button>
<p>{{ addToa }}</p>
<p>{{ addTob }}</p>
var vm = new Vue({
el : "#app4",
data : {
a: 0,
b: 0
},
methods: {
},
computed:{
addToa: function(){
console.log(123)
return this.a;
},
addTob: function(){
console.log(456)
return this.b;
}
},
关于watch
它可以检测data值的变化
export default {
name: "test1",
data() {
return {
msg: "66"
}
},
watch:{
msg(val, oldVal){
alert(val + "这是变之前的值");
alert(oldVal + "这是改变之后的值")
}
},