官网下载vue文件，在HBuild X中引入vue js
1.vue入门
? ? ? ? 语法规则：vue中必须定义根目录标签
? ? ? ? 编辑vue js
<script>
// var 的弊端：没有作用域的概念，如果变量名称重复会引发问题
// let 有作用域的概念
// const 常量 全局唯一，不可更改
const app = new Vue({
// 标识vue对象的作用范围
el: "#app",
// 定义数据对象
data: {
hello: "HelloVue"
}
})
</script>? ? ? ? 利用插值表达式，获取数据（div标签要放在script标签之前，vue要引用标签所以标签必须先加载出来引用时才能生效）
<div id="app">
{{hello}}
</div>? ? ? ? 最后效果
<body>
<div id="app">
{{hello}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
hello: "HelloVue"
}
})
</script>
</body>
（1）v-click：当程序编译结束时，v-vlock的隐藏效果将不起作用，当程序没有编译结束时，v-clock的隐藏效果有效
<head>
<style type="text/css">
/* 为属性定义样式 */
[v-clock]{
/* 定义样式不显示 */
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{hello}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
hello: "HelloVue"
}
})
</script>
</body>2.vue数据展现
? ? ? ? 先在页面最后设置好script标签
<script>
const app = new Vue({
el: "#app",
data: {
hello: "您好Vue",
html: "<h1>好好学习，天天向上</h1>",
one: "java学习",
name: "admain"
}
})
</script>? ? ? ? （1）Mustache：插值表达式
<h3>{{hello}}</h3>? ? ? ? （2）v-text：数据展现，当数据没有解析成功时，页面没有任何数据，是v-clock的升级版
<h3 v-text="hello"></h3>? ? ? ? （3）v-html：将数据按照html形式解析，有时候页面中的部分数据来自于其他服务器，远程服务器返回的是html代码片段，如果需要，会将代码片段渲染为页面形式
<div v-html="html"></div>? ? ? ? （4）v-pre：跳过这个元素和它的子元素的编译过程，可以用来显示Mustache标签。跳过大量没有指令的节点，会加快编译。当需要展示原始的Mustache标签不需要程序编译时可以使用。
<div v-pre>{{hello}}</div>? ? ? ? （5）v-once：数据只允许渲染一次
<div v-text="one" v-once></div>? ? ? ? （6）v-model：双向数据绑定，data中的数据发生变化时页面数据随时更新
<div style="border: aliceblue;">
<h3>双向数据绑定</h3>
用户名：<input type="text" name="name" v-model="name" />
</div>3.vue事件绑定
? ? ? ? （1）事件
<body>
<div id="app">
<h1 v-text="number"></h1>
<button v-on:click="number++">自增</button>
<!-- 简化操作 -->
<button @click="addNum">加1</button>
<button @click="addNum2">自增2</button>
<button @click="subNum">自减2</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
number: 1
},
methods: {
addNum:function(){
this.number++
},
// addNum方法的简化操作
addNum2(){
this.number += 2
},
subNum(){
this.number -= 2
}
}
})
</script>
</body>????????页面展示结果，可以对数字进行加减运算
? ? ? ? （2）事件冒泡：如果事件之间有嵌套关系，执行完成内部事件之后执行外部事件，这种现象称为事件冒泡，阻止事件冒泡：后面.stop
<div id="app" @click="addNum2">
<h3>{{number}}</h3>
<button @click="addNum">增1</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
number: 1
},
methods: {
addNum:function(){
this.number++
},
addNum2(){
this.number += 2
},
}
})
</script>
? ?? ? ?（3）@click.prevent：阻止默认行为，如果需要阻止标签的默认行为 则添加 @click.prevet
<div id="app">
<a href="" @click.prevent="baidu" >百度</a>
</div>
//超链接默认会跳转到指定页面，用@click.prevent阻止它的默认行为
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
},
methods: {
baidu(){
console.log(`跳转百度`);
}
}
})
</script>? ? ? ? （4）特殊按键字符说明（F12键可以查看结果）
<div id="app">
<h3>常用特殊按键字符说明</h3>
回车键触发：<input type="text" name="username" type="text" @keyup.enter="handler"/> <br>
删除键触发：<input type="text" name="age" type="text" @keyup.delete="handler" /> <br>
space键触发：<input type="text" name="sex" type="text" @keyup.space="handler" /> <br>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
},
methods: {
handler(){
console.log("函数被点击");
}
})
</script>? ? ? ? （5）计算器：要求，输入完B之后，回车键触发计算 加法操作
<body>
<div id="app">
数据A：<input type="text" v-model="num1"/>
数据B：<input type="text" v-model="num2" @keyup.enter="add"/>
总 和：<span v-text="count"></span>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
num1: '',
num2: '',
count: ''
},
methods: {
add(){
this.count = parseInt(this.num1) + parseInt(this.num2)
}
}
})
</script>
</body>4.vue属性绑定
? ? ? ? （1）属性绑定
<div id="app">
<a v-bind:href="url">百度-vue1</a>
<!-- 简化 -->
<a :href="url">百度-vue2</a>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
url: "http://www.baidu.com"
},
methods: {
}
})
</script>? ? ? ? （2）样式绑定（点击切换可进行央视的切换）
<div id="app">
<h3>样式绑定</h3>
<!-- 需求：控制red是否展现 -->
<div class="red">AAAAAAAAAAA</div>
<div :class="{red:flage}">BBBBBBBBBBBBB</div>
<button @click="flage = !flage">切换</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
flage: true
},
methods: {
}
})
</script>