Vue使用指南(一)

Vue

 Vue:前台框架 渐进式JavaScript框架 渐进式：vue可以控制页面的一个局部，vue也可以控制整个页面，vue也能控制整个前端项目      -- 根据项目需求，来决定vue控制项目的程度

使用

 1.下载：https://vuejs.org/js/vue.min.js 2.导入vue.js 3.在自定义的script标签中创建vue对象 4.用vue对象来控制页面内容

vue的优点

'''单页面web应用数据驱动数据的双向绑定虚拟DOM'''

挂载点与数据的渲染

<body><div id="app"><!-- 插值表达式：插值表达式中出现的名字代表vue变量 --><div class="root">{{ abc }}</div><div class="main">{{ xyz }}</div></div>
</body>
<script src="js/vue.min.js"></script>
<script>new Vue({// 挂载点：vue对象通过el参数(挂载点)与页面结构建立联系，vue对象与页面控制的结构应该是一对一关系，所以挂载点选择id作为唯一标识el: '#app',// 在挂载点插值表达式中出现的名字是变量，需要vue对象通过data提供
        data: {abc: '内容',xyz: 3.14}})
</script>

vue实例

<body><div id="app">{{ msg }}</div>
</body>
<script src="js/vue.min.js"></script>
<script>// vue实例(对象)var app = new Vue({el: '#app',data: {msg: "message"}});
</script>
<script>// 如何访问 "message"
    console.log(app);console.log(app.$el);// vue的变量都是以$开头
    console.log(app.$data.msg);// vue实例(对象)就是挂载点// app找到new Vue()实例再找到页面结构id=app，然后直接访问实例中的变量
    console.log(app.msg)
</script>

实例的methods

<div id="app"><!-- v-on来为事件绑定方法，事件用 :事件名 标注 --><!-- 语法：v-on:事件名 = "事件变量" --><!-- 事件变量：由vue实例的methods提供 --><button v-on:click="btnClick">{{ msg }}</button>
</div>
<script src="js/vue.min.js"></script>
<script>new Vue({el: '#app',data: {msg: "按钮"},methods: {btnClick: function () {alert('点击事件')}}});
</script>

案例：通过事件修改标签样式

<html>
<head><meta charset="UTF-8"><title>Title</title><style>/* 通过不同的类名控制着一套css样式 */.btn {width: 100px;height: 40px;background: orange;}.botton {width: 200px;height: 80px;background-color: yellowgreen;}</style>
</head>
<body><div id="app"><!-- v-bind来为属性绑定变量，属性用 :属性名 标注  eg:  :style  :class  :id --><!-- 语法：v-bind:属性名 = "属性变量" --><!-- 事件变量：由vue实例的data提供 --><button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button></div>
</body>
<script src="js/vue.min.js"></script>
<script>new Vue({el: '#app',data: {msg: "按钮",my_style: {// background: 'transparent'
            },my_cls: 'btn'},methods: {btnClick: function () {// console.log(this.my_style.background)// this.my_style.background = 'yellow';// 修改类名就能直接对应一套css样式if (this.my_cls == 'btn') {this.my_cls = 'botton'} else {this.my_cls = 'btn'}}}});
</script>
</html>

实例的computed

# computed功能：将function封装给一个变量，通过该变量就可以得到该function的返回值
# 应用场景：一个变量(name)依赖于 多个变量(first_name + last_name)的值
<div id="app"><!-- v-model就是为表单元素 value属性 绑定变量 --><p>姓：<input type="text" placeholder="姓" v-model="first_name"></p><p>名：<input type="text" placeholder="名" v-model="last_name"></p><p><!-- 插值表达式中可以书写  变量表达式 -->姓名：<span class="span">{{ name }}</span></p>
</div>
<script src="js/vue.min.js"></script>
<script>// vue实例(对象)var app = new Vue({el: '#app',data: {first_name: '',last_name: '',},computed: {name: function () {if (this.first_name == '' && this.last_name == '') {return '姓名'}return this.first_name + this.last_name}}});
</script>

实例的watch方法

# watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数# 应用场景：多个变量(first_name、last_name)依赖于一个变量(name)

<div id="app"><p>姓名：<input type="text" placeholder="姓名" v-model="name"></p><p>姓: {{ first_name }}</p><p>名: {{ last_name }}</p>
</div>
<script>var app = new Vue({el: '#app',data: {name: "",first_name: "姓",last_name: "名",},watch: {name: function () {// eg: name = “张三”this.first_name = this.name[0];  // 张this.last_name = this.name[1];  // 三
            }}});
</script>

实例的delimiters

<body><div id="main"><!-- 查找表达式 {{ }} 符号与其他语言冲突，可以自定义表达式的符号 --><!-- 实例的 delimiters: ['左侧符号', '右侧符号'] -->{{ msg }}{{{ msg }}}${ msg }</div>
</body>
<script src="js/vue.min.js"></script>
<script>// vue实例(对象)new Vue({el: '#main',data: {msg: "信息"},// delimiters: ['{{{', '}}}'],delimiters: ['${', '}'],});
</script>

实例的生命周期钩子

# 学习目的：# 钩子：满足某种条件被（系统）调用的方法# 在一个vue实例，从创建到销毁，整个过程中或产生一些时间节点，这些时间节点都会回调一些指定名字绑定的方法，在这些函数中去完成特点时间点的业务功能

new Vue({el: '#app',data: {msg: "message"},methods: {fn: function () {return '123'}},beforeCreate: function () {console.log('实例要被创建了');console.log(this.msg)},created: function () {console.log('实例已经创建了');console.log(this.msg);console.log(this.$el)},mounted: function () {console.log('实例已经渲染到页面');console.log(this.msg);console.log(this.$el);console.log(this.fn)},'生命周期钩子名': function () {console.log('该时间点需要完成的业务逻辑');},
});

转载于:https://www.cnblogs.com/98WDJ/p/10857209.html

Vue使用指南(一)相关推荐

Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...
java计算机毕业设计Vue垃圾分类指南平台设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue垃圾分类指南平台设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue垃圾分类指南平台设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
java计算机毕业设计Vue垃圾分类指南平台设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue垃圾分类指南平台设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue垃圾分类指南平台设计与实现源码+mysql数据库+系统+lw文档+部署 ...
2019 Vue开发指南：你都需要学点啥？
出处:葡萄城官网链接:https://www.cnblogs.com/powertoolsteam/p/11056531.html 原文:https://dzone.com/articles/vue ...
【vue 进阶指南一】多语言国际化（中英文切换）
vue + element-ui + vue-i18n 多语言国际化 1.element-ui 并不支持最新版的vue-i8n 插件,开发时注意i18n的版本,当然本示例成功解决版本不兼容的问题,详细 ...
vue教程 pdf vue权威指南
在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html 官方的文档 ...
Vue 犯罪指南：TypeError: Right-hand side of 'instanceof' is not an object
背景:在迁移项目从 Vue1.x 到 Vue2.x 时,改动没有过脑子,导致翻车. 转载于:https://www.cnblogs.com/duxing/p/6928246.html
Vue精简版风格指南
前面的话 Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,且代码间隔较大,不易查询.本文按照类型分类,并对部分示例或解释进行缩减,是Vue风格指南的精简版组件名称 [组件 ...
vue:无法将“vue”识别为脚本_「前端架构」React和Vue -CTO的选择正确框架的指南...
快速总结:为项目选择正确的javascript框架或库是CTO和项目经理的基本任务.然而,选择的范围很大程度上取决于几个因素,如项目时间.学习曲线.框架性能和团队规模.这篇文章旨在指导他们选择正确的j ...

Vue使用指南(一)

Vue

使用

vue的优点

挂载点与数据的渲染

vue实例

实例的methods

案例：通过事件修改标签样式

实例的computed

实例的watch方法

实例的delimiters

实例的生命周期钩子

Vue使用指南(一)相关推荐

最新文章

热门文章