vue.js 中怎么使用 highCharts

Posted 2023-04-07

参考技术A 　　Vue.js在数据绑定的API设计上借鉴了Angular的指令机制：
用户可以通过具有特殊前缀的HTML 属性来实现数据绑定，也可以使用常见的花括号模板插值，或是在表单元素上使用双向绑定：
　　<!-- 指令 -->
<span v-text="msg"></span>
<!-- 插值 -->
<span>msg</span>
<!-- 双向绑定 -->
<input v-model="msg">

　　插值本质上也是指令，只是为了方便模板的书写。本回答被提问者采纳

vue.js基础

vue.js

• • 引入vue.js文件:
  • vue的基本语法？
  • 触发事件?
  • 一个小代码：
  • 效果图:

提出问题？

怎么使用data中数据?
怎么使用methods中函数？

1.vue.js是引入vue文件才可以使用vue.js

引入vue.js文件:

    官网的外部文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

vue的基本语法？

var app=new Vue({

el:’#app’, // 获取元素的id属性，进而绑定这个元素

data:{
message:‘我是为啥’,
//数据里的变量值可以在绑定的元素打印出数据
//怎么使用data中数据:在绑定的元素打下{{message}}显示数据了

},
methods: {

doli:function(){
//
},

//在methods写下函数,函数名,再到绑定的元素写下触发事件,可以点击执行里面的函数
})

触发事件?

触发事件有： （记住）
点击事件： @click=“函数名”，

mouseenter ：进入 mouseover：在 mousemove：移动 mouseout：移出 mouseleave：离开

click：单击 mousedown：按下鼠标 mouseup：松开鼠标 dblclick：双击

一个小代码：

<div id="app" @mouseover="doli" @mouseleave="doll">

{{message}}

</div>

<script>

var app=new Vue({

el:'#app',

data:{
    
    message:'我是为啥',

},

methods: {
    

doli:function(){

    this.message="晚上好";



},
doll:function(){


    this.message="我是为啥";
}


},

})


</script>

效果图:

鼠标未接触div时：

鼠标接触div时:(文字改变了)

鼠标再离开div时: