vue实例练习和vue样式练习

1.vue实例练习

<head><title>vue实例演示</title><script src="../vue.js"></script>
</head>
<body><div id="app"><!-- 过滤器的两种写法   --><!-- msg|toUpCase  变量|方法 --><p>1.字母大写：{{msg|toUpCase}}</p>  <p><div v-bind:id="msg|toUpCase">2.绑定测试</div></p><p>——————————————————————————————————————————————————————————</p><p>{{msg}}</p><button @click="changeMsg">按钮</button><p>——————————————————————————————————————————————————————————</p><p>单价{{price}}</p><p>数量{{num}}</p><p>总价{{totlePrice}}</p><button @click="num==0?0:num--">减小1次数量</button><button @click="num++">增加1次数量</button></div><script>var vm = new Vue({el:"#app",//指定元素data:{  //存储数据msg:"hello world",num: 0,price:20},methods:{  //定义方法，通过vue实例可以直接访问这些方法changeMsg(){this.msg="改变了vue实例的数据！"}},computed:{//计算属性，结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。totlePrice(){return this.num*this.price}},watch:{//监听数据变化totlePrice(newValue,oldValue){console.log(newValue);console.log(oldValue);}},filters:{  //过滤器，在页面中直接操作数据，返回最终结果//英文的字符串过滤成大写toUpCase(value){//.toUpperCase()转换成大写return value?value.toUpperCase():""}}})</script>
</body>

运行代码结果如下图

点击按钮可以改变vue实例

2.vue样式练习

<head><title>样式演示</title><script src="../vue.js"></script><style>.box {background-color: pink;width: 100%; height: 200px;}.inner {background-color: red;width: 100px; height: 50px;border: 2px solid white;}</style>
</head>
<body><div id="app"><p><div style="width: 100px;height: 100px; background-color: pink;"></div></p><!--内联样式--><!-- 绑定样式属性值  通过v-bind 改变属性--><!-- 报错了 <p v-bind:style="{width: width,height: height,     **background-**    color:red}">bbb</p> --><p>修改后<div v-bind:style="{width: width,height: height,'background-color':red}"> bbb</div></p><p v-bind:style="{color:red,width: width,height: height}">bbb</p><!-- 绑定样式类 --><p v-bind:class="{inner}">样式类</p></div><script>var vm = new Vue({el:'#app',data:{width:'100px',height:'100px',red:'blue',inner:'inner'}})</script>
</body>

代码运行结果如下

vue实例练习和vue样式练习相关推荐

Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) 目录 Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) ...
Vue 实例之数据绑定，事件，组件，生命周期！！！
文章目录关于 vue 设计模式的简介 1.Vue实例创建简单 vue 实例 el 唯一根标签: data: methods: computed: watch: filters: 2.Vue 数据绑 ...
创建第一个vue实例
一.vue安装与下载 1. 官网下载下载地址选择开发版本 2. 打开sublime,新建vue文件夹,将下载好的代码vue.js放入vue文件夹中. 3. 新建index.html文件,在hea ...
Vue实例里this的使用
2019独角兽企业重金招聘Python工程师标准>>> 要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以 ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
vue实例、指令、生命周期
vue实例.指令.生命周期本章重点 1.生命周期 2.插值 3.指令一.创建一个实例vue实例每一个vue应用都是通过vue函数创建一个新的vue实例开始的语法: ver vm = new V ...
[Vue.js] 基础 -- Vue实例
Vue实例创建一个Vue实例 // var vm = new Vue({// 选项 }) 当创建一个 Vue 实例时,你可以传入一个选项对象一个 Vue 应用由一个通过 new Vue 创建的根 ...
05Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
前端框架之Vue(1)-第一个Vue实例
vue官方文档知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. {var a = 1; } console.info(a); // 1 例1: var arr = []; ...
js导出变量 vue_js文件中怎么引用vue实例？
js文件中怎么引用vue实例?下面本篇文章通过示例给大家介绍一下在vue项目中的js文件里使用vue实例.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 第一种方法: 1.首先在ht ...

vue实例练习和vue样式练习

vue实例练习和vue样式练习

1.vue实例练习

2.vue样式练习

vue实例练习和vue样式练习相关推荐

最新文章

热门文章