一、什么是vue.js
Vue (读音/vjuː/，类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
二、vue的安装
1、直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
2、cdn我们推荐链接到一个你可以手动更新的指定版本号：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> |
3、在用Vue 构建大型应用时推荐使用NPM 安装[1]。NPM能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时Vue 也提供配套工具来开发单文件组件。
# 最新稳定版$ npm install vue |
4、Vue提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目
三、vue的使用
基于官方推荐，我们使用cdn的方式进行学习
<!-- 开发环境版本，包含了用帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> |
四、vue组件的重要选项
1、第一个实例
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: hello world
}
})
</script>
运行结果为：hello world
2、vue的数据渲染{{}} v-text v-html
<div id="app">
<p>{{ a }}</p>
<p v-text="a"></p>
<p v-html="a"></P>
</div>
<script>
var app =new Vue({
el: '#app',
data: {
a: 'hello'
}
})
</script>
3、控制模块隐藏v-if v-show
<div id="app">
<p v-if="isShow">hello</p>
<p v-show="isShow">world</P>
</div>
<script>
var app =new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
4、循环列表v-for
<div id="app">
<ul>
<li v-for="item in items">
<p>{{item.name}}</p>
</li>
</ul>
</div>
<script>
var app =new Vue({
el: '#app',
data: {
items: [
{name:'wmx'},
{name:'sjj'}
]
}
})
</script>
5、事件绑定v-on
<div id="app">
<p>{{a}}</p>
<button v-on:click="doMethod">事件绑定</button>
<button @click="doMethod">事件绑定简写</button>
</div>
<script>
var app =new Vue({
el: '#app',
data: {
a: 1
},
methods:{
doMethod:function(){
this.a++
}
}
})
</script>
v-model它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app =new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
6、vue的常用属性data（数据）、methods（方法）、watch（监听）
<div id="app">
<p>{{ a }}</p>
<button @click="doMethod">自增</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
a: 1
},
methods:{
doMethod:function(){
this.a++
}
},
watch:{
'a':function(val,oldVal){
console.log(val+":"+oldVal)
}
}
})
</script>
如果定义在外边要加$，来区分我们自己定义的属性
var data = { a:1 }
var vm =new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example')// => true
// $watch 是一个实例方法
vm.$watch('a',function (newValue, oldValue) {
//这个回调将在 `vm.a`改变后调用
})
五、组件化应用构建
组件系统是 Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在 Vue里，一个组件本质上是一个拥有预定义选项的一个 Vue实例。在 Vue中注册组件很简单：
// 定义名为 todo-item 的新组件 |
现在你可以用它构建另一个组件模板：
<ol> |
但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：
Vue.component('todo-item', { |
现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
<div id="app-7"> |
Vue.component('todo-item', { |
1. 蔬菜
2. 奶酪
3. 随便其它什么人吃的东西
尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop接口与父单元进行了良好的解耦。我们现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。
在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。在后续教程中我们将详述组件，不过这里有一个 (假想的)例子，以展示使用了组件的应用模板是什么样的：
<div id="app"> |