//来自 https://www.cnblogs.com/lhl66/p/8021730.html 侵删el:element 需要获取的元素，一定是HTML中的根容器元素
data:用于数据的存储
methods:用于存储各种方法
数据绑定字面量只加载一次{{* msg}}
data里面可以进行简单的运算；
methods:{
 getHome(){
   return "早上好"
 }
}
--------------------------------------------------
HTML中渲染{{getHome()}}  //得到的结果是--->早上好

v-bind绑定属性简写就是一个冒号 如
data{
 id:12
}

--------------------------------------------------
动态绑定dom元素
data{

websiteTag:"百度"

}
html中 <p v-html="websiteTag">

单击事件：v-on:click="方法"      @click="方法"(简写)

双击事件：v-on:dblclick="方法"    @dblclick="方法"(简写)

data:{

x:0,y:0

}

updataXY(event){

console.log(event) //js鼠标事件默认的

this.x = event.offsetX;

this.y = event.offsetY;

}
HTML渲染:
<div id="canvas" @mousemove="updataXY">

{{x}}-----{{y}}

事件还有很多，用法都一样；
阻止冒泡：

data:{

x:0,y:0

}

updataXY(event){

console.log(event) //js鼠标事件默认的

this.x = event.offsetX;

this.y = event.offsetY;

}

updataStop(evevt){

event.stopPropagation();

}

HTML渲染:

方法一：

<div id="canvas" @mousemove="updataXY">

{{x}}-----{{y}}

<span @mousemove="updataStop">移到我这里不会改变xy坐标

方法二:
 //vue中加stop修饰符即可阻止冒泡

--------------------------------------------------
阻止默认行为:

--------------------------------------------------
键盘事件：
changeName(){
 console.log("你正在输入名字")
}
数据双向绑定：
data:{
 name:""
}

补充一个知识点：获取vue获取input的value的方法--->this.$refs.name.value;
--------------------------------------------------
计算属性：
data:{
 a:0,b:0,age:10
}
methods:{

addA(){

console.log("add  to a")

return this.a+this.age;

}

addB(){

console.log("add  to B")

return this.b+this.age;

}

}

法一：用方法实现这个功能

<button @click="a++">Add to A

<button @click="b++">Add to A
A-{{a}}
A-{{b}}
Age-A={{addA()}}
Age-B={{addB()}}
法二：用计算属性实现
computed:{
  addA(){
    console.log("add  to a")
    return this.a+this.age;
  }
  addB(){
    console.log("add  to B")
    return this.b+this.age;
  }
}


A-{{a}}
A-{{b}}
Age-A={{addA}}
Age-B={{addB}}
--------------------------------------------------
动态css
data:{
  changeColor:false
}
你好


--------------------------------------------------
v-if指令（后面可以跟v-else-if  v-else）
v-show指令
区别在于v-if 判断dom结构是否存在，v-show是使用的display属性来是否显示
--------------------------------------------------
v-for指令数组遍历数组、对象
data:{

arr:["bob","wow","pop"],list:[

{name:"bob",age:18}

{name:"wow",age:19}

{name:"pop",age:20}

]

}

  



  

  

  


注意如果用div渲染会直接渲染div包着的结构；（3个div）
{{item.name}}
  
{{item.age}}

改用template的话可以去掉不必须要的空元素div （1个div）

--------------------------------------------------
index.html-->main.js（实例化vue对象）-->app.vue
html（template）--->js---->style三部分内容
--------------------------------------------------
全局注册组件在main.js写上Vue.component("自定义名字",组件名)
调用组件<自定义名字>
局部组件：
data(){
  return{
}

},components:{组件名}
组件css作用域 scoped限定

组件预处理器
组件传值（父组件-->子组件（props）/子组件--->父组件（自定义事件））

需要用的数据放置父组件的data里面

假定在app.vue

data:{

list:[

{name:"bob",age:20}

]

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!