Vue框架快速入门
Vue入门
实现代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue入门</title><!--引入vue.js文件--><script src="../js/vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message"><!--这里使用差值表达式-->{{message}}</div>
</body>
<!--在script标签下编写vue命令-->
<script>
<!--vue通过#app这个id来识别覆盖范围-->new Vue({el:"#app",data:{message:"Hello vue"}})
</script>
</html>== 这里的vue.js文件需要在官网上下载到本地，后者直接在官网导包 ==
Vue常用指令
- v-bind & v-model:
- v-on:
v-bind & v-model & v-on的实践代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue入门</title><!-- 引入Vue.js库 --><script src="../js/vue.js"></script>
</head>
<body><!-- Vue实例的作用域，所有指令和绑定都在这个元素及其子元素内生效 --><div id="app"><!-- 使用v-bind指令绑定href属性的值到Vue实例的data属性中的url --><a v-bind:href="url"><!-- 创建一个按钮，点击后会跳转到绑定的url --><input type="button" value="url" ></a><br><!-- 使用v-model指令创建双向数据绑定，将输入框的值与Vue实例的data属性中的url绑定 --><input type="text" v-model="url"><br><!-- 使用v-on指令绑定click事件到Vue实例的methods属性中的handle方法 --><input type="button" value="click me" v-on:click="handle()"></div>
</body>
<!-- Vue实例的JavaScript代码 -->
<script>// 创建一个新的Vue实例new Vue({el:"#app", // 指定Vue实例挂载的元素，这里是id为'app'的div元素data:{ // 定义Vue实例的数据对象url:"https://cn.vuejs.org/guide/introduction.html" // 初始化url数据},methods:{ // 定义Vue实例的方法对象handle:function(){ // 定义一个名为handle的方法alert("我被点了") // 当方法被调用时，弹出一个警告框}},})
</script>
</html>- v-if & v-show
实践代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuedome</title><script src="../js/vue.js"></script>
</head>
<body><div id ="app"><p>输入年龄:</p><br> <!-- 输入年龄 --><input type="text" v-model="age"><br> <!-- 绑定输入框与 age 变量 -->判断为：<span v-if="age <= 35">年轻人（35以下）</span> <!-- 使用 v-if 条件判断年龄范围 --><span v-else-if="age > 35 && age <= 60">中年人（35到60）</span><span v-else>老年人（60以上）</span><span v-show="age <= 35">年轻人（35以下）</span> <!-- 使用 v-show 按条件显示不同年龄段提示 --><span v-show="age > 35 && age <= 60">中年人（35到60）</span><span v-show="age > 60">老年人（60以上）</span></div>
</body>
<script>new Vue({el:"#app",data:{age:40 // 初始化 age 变量值为 40},methods:{ // 方法部分为空},})
</script>
</html>Vue常用指令综合应用案列
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>VueExeclDemo</title><script src="../js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>ID</th><th>Name</th><th>Age</th><th>Gender</th><th>score</th><th>level</th></tr><!-- 使用 Vue 的指令 v-for 对用户数组进行循环渲染 --><tr align="center" v-for="(users, index) in users"><td>{{index+1}}</td><td>{{users.name}}</td><td>{{users.age}}</td><td><!-- 根据用户的性别，显示不同的文本 --><span v-if="users.gender === 1">Male</span><span v-else>Female</span></td><td>{{users.score}}</td><td><!-- 根据用户的分数，显示不同的等级 --><span v-if="users.score >= 85">A</span><span v-else-if="users.score >= 60">B</span><span style="color:red" v-else>C</span></td></tr></table></div>
</body>
<script>var app = new Vue({el: '#app',data: {// 定义用户数组，包含每个用户的信息users: [{id: 1,name: 'TOM',age: 18,gender: 1,score: 90,}, {id: 2,name: 'Jerry',age: 19,gender: 2,score: 85,}, {id: 3,name: 'Lily',age: 20,gender: 1,score: 95,}, {id: 4,name: 'Lucy',age: 21,gender: 2,score: 80,}, {id: 5,name: 'Mike',age: 22,gender: 1,score: 59,}]},methods: {// 这里可以添加 Vue 的方法}})
</script>
</html>
实现结果：
Vue生命周期
从new Vue开始，到最后销毁，Vue架构会经历八个生命阶段，八个生命阶段组成一个完整的生命周期。每到一个生命周期阶段则会触发对应的生命周期方法（钩子）。
mounted方法
对于java程序员来说重点关注mounted方法，该方法在Vue框架完成挂载后就会自动执行，有点类似Java的构造方法。
一般在mounted方法发送服务器请求指令。
