开始学习Vue的使用
第一步导入 vue框架包
具体可以参考官网的使用 安装:Vue的安装
(简言之:直接下载vue.js 然后通过 script 本地引入一下就可以了,可以不使用其链接的方式)
划重点:
- Vue 使用时 注意其格式;(
var vm = new Vue({
el:'#app', //这里的app 名字就是对于.html中需要使用Vue的父容器的id 名称
data:{
},
methods:{
},
...
})
- v-clock:可以用来解决 初始化加载页面的时候 页面未加载完成前显示的空白问题(闪屏问题);
- v-html / v-text / v-on:(缩写 @ ) / v-bind: (缩写 :)
话不多说:上代码
<!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" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 下面的差别有详细的说明;对着网页上显示的结果看更明显 -->
<!-- v-cloak不会覆盖 其他的累加内容,可以解决闪屏问题 -->
<p v-cloak>--- {{ msg }} v-cloak不会覆盖 其他的累加内容,可以解决闪屏问题</p>
<!-- v-text 指令最终显示的结果只能是 对应的变量(msg)的属性的值,也就是不能累加参数。如果没有累加的其他参数默认是不会闪屏的 -->
<h3 v-text="msg">v-text 指令最终显示的结果只能是 对应的变量(msg)的属性的值,也就是不能累加参数。如果没有累加的其他参数默认是不会闪屏的</h3>
<!-- v-html指令可以把文本解析成html格式,并且显示的结果只是属性(msg2)的值;尽管后面还有赋值:但是也不会累加 (和v-text这个功能类似) -->
<h4 v-html="msg2">v-html指令可以把文本解析成html格式,并且显示的结果只是属性(msg2)的值;尽管后面还有赋值:但是也不会累加 (和v-text这个功能类似)</h4>
<!-- value="msg3" :这样写的话;value只是把msg3 当作一个 字符串显示 -->
<input value="msg3"><br><br>
<!-- 添加绑定:v-bind后:v-bind:value="msg3" 这个时候 对应的绑定的是一个属性;也就是说:value把 msg3当成一个属性;并显示属性里面的值 -->
<input style="width: 30%" v-bind:value="msg3 + '++我是在变量后累加的字符串 '"> <br><br>
<!-- 下面是对 v-bind:value 的简写(:value) 这样简写后 (v-bind:value) 等价 (:value) -->
<input :value="msg3"><br>
<!-- 指令:v-on: 是绑定事件机制 click:是点击事件; mouseover:鼠标引动上面的事件 ;;等等 (v-bind:是绑定属性机制) -->
<!-- v-on: 的缩写:@ 例如:v-on:click 等价: @click 事件绑定机制 -->
<input type="button" v-bind:value="msg4button" v-on:click="show" v-on:mouseover="mouseover1 ('鼠标经过~~~') ">
<p id="input_v_on" style="color: red"></p>
</div>
<script src="./lib/vue-2.6.10.js"></script>
<script>
//构建一个vue实例,
//当导入 vue.js架包后;在浏览器的内存中就多了一个 Vue构造函数
var app = new Vue({
el: '#app',
data: {//data 属性中,存放的是el 中要用到的数据
msg: '欢迎学习vue226',
msg2: '<h1>v-html指令可以把文本解析成html格式</h1>',
msg3: '自定义的变量',
msg4button: '我是一个按钮'
},
methods: {
show: function () {
alert('我是提示警告对话框');
},
mouseover1: function (msgvv) {
var vvr = document.getElementById("input_v_on");
vvr.innerHTML = msgvv;
var if_show = vvr.style.display;
if (if_show == "none") {//已经隐藏状态
vvr.style.display = "block";
}
else {
vvr.style.display = "none";
}
}
}
})
</script>
</body>
</html>