前端框架目前是比较多的，主流的有 Angular、 React、Vue，前端框架上手都很容易，学习成本比较低，我这里选择学习Vue ，是因为我对Vue也有一定的理解 学习起来就更快更容易。Vue的介绍嘛，官网走一波 Vue官方教程。但是Vue对IE8及以下的版本不兼容。
Vue的安装
- 直接下载，然后在你的页面通过
<script>标签进行引用 - 也可直接引用Vue的CDN地址
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> - NPM 安装
npm install vue - Vue提供的命令行工具（CLI）快速搭建脚手架。
Vue的简单实例
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1> {{message}}</h1>
<input type="text" v-model="message">
<input type="checkbox" v-model="show">
<p v-if="show">{{message}}</p>
<ol>
<li v-for="value in list">
{{value}}
</li>
</ol>
<button @click="reverseMessage">反转信息</button>
<a :href="url">百度一下</a>
<p>{{reverseMessages}}</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"this is vuejs",
show:false,
list:[12,16,19],
url:"http://www.baidu.com"
},
methods:{
reverseMessage: function () {
this.message=this.message.split('').reverse().join('');
}
},
computed:{
reverseMessages:function(){
return this.message.split('').reverse().join('');
}
},
created:function(){
console.log(this.show)
},
})
</script>
</body>
</html>
生命周期钩子函数
<!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">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<!-- 提供入口 -->
<div id="app">
<h1>Vue生命周期钩子函数</h1>
<input v-model="a" placeholder="edit me">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
a:1
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log("--beforeCreate--")
this.a=2;//数据赋值不成功
},
//在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
//然而，挂载阶段还没开始，$el 属性目前不可见。
created:function(){
console.log("--created--")
console.log(this.a)
this.a=2;//
},
// 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
beforeUpdate:function(el){
console.log("--beforeUpdate--")
console.log(this.a)
console.log(this.$el)
},
//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
// 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
//然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
updated:function(el){
console.log("--updated--")
console.log(this.a)
console.log(this.$data.a)
},
//实例销毁之前调用。在这一步，实例仍然完全可用。
beforeDestroy:function(){
console.log("--beforeDestroy--")
},
//Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
destroyed:function(){
console.log("--destroyed--")
}
})
</script>
</body>
</html>
模板语法
文本
<span v-once>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。如果添加了v-once指令，那么当数据改变时 插值处将不会更新。
指令
-
v-html指令： 可以将插值处以html输出
-
v-show ：根据参数真假值切换display css属性达到显示或隐藏
-
v-if：根据参数真假值渲染或不渲染元素
-
v-else: 前面必须有v-if 或 v-else-if 使用
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> -
v-for 循环
<div v-for="(item, index) in items"> {{item.text}}--{{index}} </div> -
v-on 绑定事件 缩写
@+事件名-
.stop- 调用event.stopPropagation()。 -
.prevent- 调用event.preventDefault()。 -
.capture- 添加事件侦听器时使用 capture 模式。 -
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。 -
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。 -
.native- 监听组件根元素的原生事件。 -
.once- 只触发一次回调。 -
.left- (2.2.0) 只当点击鼠标左键时触发。 -
.right- (2.2.0) 只当点击鼠标右键时触发。 -
.middle- (2.2.0) 只当点击鼠标中键时触发。 -
.passive- (2.3.0) 以{ passive: true }模式添加侦听器<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+)可以动态的指定要绑定的事件类型 --> <button v-on:[event]="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <script> var vm=new Vue({ el:"#app", data:{ a:1 }, methods:{ doThat:function(str,el){ console.log(str,el) } } }) </script> <!-- 缩写 --> <button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) --> <button @[event]="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
-
-
v-bind 动态的绑定一个或多个特性 缩写
:<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 动态特性名 (2.6.0+) 可以动态的指定要绑定的参数名--> <button v-bind:[key]="value"></button> <!-- 缩写 --> <img :src="imageSrc"> <!-- 动态特性名缩写 (2.6.0+) --> <button :[key]="value"></button> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 当参数isRed 为真时--> <div :class="{ red: isRed }"></div> <!-- 绑定多个对象参数 --> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <script> //计算属性 computed:{ styleObjectA:function(){ return {"fontSize":"40px"} }, styleObjectB:function(){ return {"color":"red"} } } </script> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg> -
v-model 在表单控件或者组件上创建双向绑定 只能在下面的控件上使用
<inputselecttextarea- components
<!-- 提供入口 --> <div id="app"> <h1>Vue生命周期钩子函数</h1> <input v-model="msg" placeholder="edit me"> <!-- 内联语句 --> <span>{{msg}}</span> </div> <script> var vm=new Vue({ el:"#app", data:{ msg:"this is msg" } }) </script> -
v-slot 缩写
# -
v-pre 跳过大量没有指令的节点会加快编译。
-
v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。[v-cloak] { display: none; }<div v-cloak> {{ message }} </div>
扫一扫
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
