基于菜鸟教程快速入门Vue2.0

runoob:run noob 的合并,原意 奔跑吧菜鸟

依据个人经验:
将<style>标签放到html对应的<head>标签中
<script>标签放到<body>标签之后

引入js:
下载 vue.min.js文件:https://vuejs.org/js/vue.min.js
CDN:内容分发网络,可通过cdn加速访问国外的网站,可以将下面的网址替代script标签里的网址,访问速度会加快;

https://cdn.staticfile.org/vue/2.2.2/vue.min.js

安装npm和vue-cli命令行工具
NPM:包管理工具,可以从npm上下载别人的和上传本地的第三方包
template标签作用:编写页面静态部分,即view部分
{{message}}:用于输出对象属性和函数返回值
el:指向div的id属性,div 外部不受影响;
data:{}给{{}}标签设置内容;
v-html指令:用于输出html代码;
v-bind指令:绑定HTML属性中的值,v-bind:后跟属性名,在data里再设置该内容,例:v-bind:href=“url”,可以缩写为:href=“url”;
事件修饰符:通过由点(.)表示的指令后缀来调用修饰符,例如:.stop.prevent,可以串联(点点)
按键修饰符:例如.enter.space等
v-if指令:当v-if="true"时执行标签里面的内容;
v-else、v-else-if指令搭配if语句进行执行;
v-on指令:监听DOM事件,主要用在按钮上,例v-on:click=“doSomething”,doSomething为监听事件名,可以缩写为@click=“doSomething”;
v-model指令:用来实现双向数据绑定,比如在input、select、textarea、checkbox、radio等表单控件,根据表单上的值,自动更新绑定的元素的值;
过滤器:使用管道符|指示,过滤器函数接受表达式的值作为第一个参数;
v-show指令:类似于if语句,当v-show="true"时执行标签里面的内容;
v-for指令:循环遍历内容,例如v-for="site in sites"遍历site对象里面的内容,site名字可以任意取;
vm. w a t c h : 监 听 输 入 框 里 的 内 容 , 另 一 个 输 入 框 接 着 改 变 内 容 , watch:监听输入框里的内容,另一个输入框接着改变内容, watch表示获取冒号前的内容;
Vue.js 样式绑定
v-model修饰符:
.lazy:将input转为change事件;
.number:将用户输入值转为Number类型内容;
.trim:自动过滤用户输入的首尾空格;
Vue.js表单:单选、复选框按钮
Vue组件:
是什么:vue将每个部分分解成单独的模块化代码成为组件,将各种组件堆积成为一个大型应用;
作用:可以拓展Html元素,封装可重用的代码;
在new Vue之外的叫全局指令
全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点;

//例如:创建根实例

var Child = {
  template: '

自定义属性!

'
} Vue.component('runoob', { template: '

自定义方法!

'
}) new Vue({ el: '#app', components: { // 将只在父模板可用 'runoob': Child } })

Vue.js路由:
需要引入路由js文件:

https://unpkg.com/vue-router/dist/vue-router.js

过渡其实就是一个淡入淡出的效果
混入没搞懂是个什么鬼东西?
谨慎使用全局混入对象,因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。
Vue 要实现异步加载需要使用到 vue-resource 库。

Vue实例:
1、导航菜单实例:点击事件触发方法;
2、编辑文本实例:点击事件触发方法;
3、订单列表实例:循环遍历、过滤器;
4、搜索页面实例:匹配搜索内容;
5、切换不同布局实例:

你可能感兴趣的:(前端)