前言:
听说这个Vue挺热门的, 我们公司前端貌似也是Vue,要做全栈Vue还是学习一下吧:
正文:
Vue:
1、官网:可自底向上逐层应用的、用来构建用户界面的渐进式框架;
2、当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的
基础:
ViewModel是Vue.js的核心,是一个作用于某HTML元素上的Vue实例;Vue容许使用者采用简洁的模板语法将数据渲染进DOM系统中;
强烈推荐始终使用kebab-case事件名:my-example、my-test、my-front、my-demo
属性
一个Vue对象四个常用属性:el、data、methods、components
el:声明管理的边界,数据与谁绑定,目前看到的都是和id绑定
data:存储数据的属性(值),对象格式
methods:事件的方法,实现;
还有一个computed两者效果一样,但后者依赖缓存,缓存改变才重新获取值,而methods重新渲染时(如刷新界面)函数总重新调用,computed默认属性为getter【菜鸟教程】
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
components:组件
ps:还有一个filters过滤、类似装饰模式、修饰限制一下、不常用
结合官网的例子,大家感受一下:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
watch监听:响应数据变化、貌似会保存旧值(这个操作莫名感觉很6)【菜鸟教程】
使用:
1、html文件引用 ;建议下载到本地 以引用本地文件的方式使用
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
注意:
1、冒号、逗号后面要加一个空格
2、对象里用两个空格代替缩进,存放链接使用require、数据用单引号引起
{
url: require('./assets/images/img4.png'), }
常用点:
1、文本插值绑定:{{}},如上面的例子
2、双向绑定:v-model,angular中利用ngModel实现双向绑定,看菜鸟教程感觉这个取得是value,实际运用中验证吧
<div id="app">
<p>{{ message }}</p>//插值绑定,显示作用
<input v-model="message">//界面打开是显示data中的值,用户输入改变值时,上面的message也跟着改变
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
补充:有一个.lazy修饰符,这样就不是input同步的而是change事件中同步,看起来像是在鼠标离开或者失去焦点时改变;.number修饰符自动将用户输入转为数值类型,类似的还有,自行百度或Google,还有.trim
3、输出html代码:v-html=“*”
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
常用指令:带v-的特殊属性
1、v-if:条件渲染指令,v-if='***'根据***返回bool值
初始化渲染条件为假,什么也不做直到第一次 条件为真开始渲染条件块,切换过程中确保条件块内事件监听器、子组件被适当销毁和重建,有比较高的切换开销、运行时条件改变很少推荐使用;
2、v-show:条件渲染,所指定的元素始终被渲染到HTML,但是不符合条件的会通过style属性 设为隐藏,有较高初始渲染开销、如需要频繁的切换推荐使用;
<div id="mjx">
<h1 v-if="something">马金兴</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
</div>
<script src="D:/js/vue.js"/>
<script>
var vuemjx = new Vue({
el: '#mjx',
data:{
something: true,#和上面v-if“”中同,注意空格
age: 28#符合上面的条件判断,Age:28显示,修改为23、不符合隐藏
}
})
</script>
3、v-else:跟在v-if或v-show后面,但是官网说v-show不支持v-else、这个用用就知道了
在2.1.0中新增v-else-if块
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
4、v-for:循环、数组渲染,比v-if优先级高;建议使用v-for时通过key(类似于id)
<div id="app-4">
<ol>
<li v-for="todo in todos">//in可以被of代替,更接近js迭代器语法
{{ todo.text }}的价格是:{{todo.price}}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' , price: '12' },
{ text: '学习 Vue', price: '12' },
{ text: '整个牛项目' , price: '12' }
]
}
})
5、v-bind:样式绑定,用法 v-bind:attribute="",可缩写为“:”
<li v-for="n in pageCount"><!--修改class样式-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 4
}
})
</script>
缩写形式:<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>
6、v-on:监听dom事件,缩写为@【菜鸟教程】
<div id="app">
<p><input type="text" v-model="message"></p>
<p>
//click事件直接绑定一个方法;缩写为@click="greet"
<button v-on:click="greet">Greet</button>
</p>
<p>
<!--click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function() {
// // 方法内 `this` 指向 vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})
</script>
7、$event:事件对象,同js中的event,angular中也常常用到这个对象,作为参数
扩展:
1、过滤器|可串联(多个),感觉类似angular中的管道|
<p>{{ jiexige|uppercase }}</p>
//uppercase 大写、 lowercase 小写、 capitalize 首字母大写、currency 参数:"¥" 钱币
全局组件:通过Vue.component创建组件
<div id="app">
<runoob message="hello!"></runoob>//通过名字引用,传了个参数给runoob组件
</div>
<script>
// 注册
Vue.component('runoob', {
// 声明 props,传递数据的一个自定义属性
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
关于props:推荐kebab-case命名法(短横线分隔)my-component-name
基础组件:常用组件的自动化全局注册
“自动化”这个词听起来就很高大上啊有木有?angular中还没有见到这种自动注册组件的功能,可能对angular认识还比较浅,不过Vue组件的思想和angular还是很像的;下面具体来看一下吧:
全局注册的行为必须在根 Vue 实例 (通过 new Vue
) 创建之前发生,如可以在入口文件:src/main.js中导入
代码我就不复制了写的还是很明白的,传送门在此
局部组件:父子组件
上面写了一个静态的prop,下面来一个动态的:【菜鸟教程】 这个和angular还是很相像的
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
// 注册
Vue.component('todo-item', {
// 声明 props,传递数据的一个自定义属性
props: ['todo'],//通过todo接收传过来的值,找todo不找item
// 同样也可以在 vm 实例中像 "this.todo.text" 这样使用
template: '<li>{{ todo.text }}</li>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>
也可以通过JavaScript定义组件:
1、var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
1.1、components中使用时:
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
1.2、ComponentA 中用 ComponentB
var ComponentA = {
components: {
'component-a': ComponentB
},
// ...
}
2、通过 import/require 使用
ComponentB.js 或 ComponentB.vue 文件中:
import ComponentA from './ComponentA'//导入
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
子组件将值传出去:自定义事件
$on(eventName)
监听事件、 $emit(eventName)
触发事件
自定义指令:
加注释的截图没有保存上,给个链接慢慢去悟吧
路由:通过不同的 URL 访问不同的内容
载入vue-router库:下载到本地比较好
到这里菜鸟教程就读完了,但是运行菜鸟提供的例子、打开完全看不懂,看来还是要看官网的,这篇量够了,下篇见咯
感谢分享: