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

最新推荐文章于 2023-07-10 19:53:10 发布

Rsun04551

最新推荐文章于 2023-07-10 19:53:10 发布

阅读量480

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yang_guang3/article/details/114388425

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

runoob：run noob 的合并，原意奔跑吧菜鸟

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

引入js：<script src="https://unpkg.com/vue/dist/vue.js"></script>
下载 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 ：监听输入框里的内容，另一个输入框接着改变内容，$ 表示获取冒号前的内容；
Vue.js 样式绑定
v-model修饰符：
.lazy：将input转为change事件；
.number：将用户输入值转为Number类型内容；
.trim：自动过滤用户输入的首尾空格；
Vue.js表单：单选、复选框按钮
Vue组件：
是什么：vue将每个部分分解成单独的模块化代码成为组件，将各种组件堆积成为一个大型应用；
作用：可以拓展Html元素，封装可重用的代码；
在new Vue之外的叫全局指令
全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点；

//例如：创建根实例

var Child = {
  template: '<h1>自定义属性!</h1>'
}
Vue.component('runoob', {
  template: '<h1>自定义方法!</h1>'
})

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

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

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

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

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

Rsun04551

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
基于菜鸟教程快速入门Vue2.0

runoob：run noob 的合并，原意奔跑吧菜鸟依据个人经验，将引入js：下载 vue.min.js文件：https://vuejs.org/js/vue.min.jsCDN：内容分发网络，可通过cdn加速访问国外的网站，可以将下面的网址替代script标签里的网址，访问速度会加快；https://cdn.staticfile.org/vue/2.2.2/vue.min.js安装npm和vue-cli命令行工具；NPM：包管理工具，可以从npm上下载别人的和上传本地的第三方包；temp
复制链接

扫一扫