基础

起步

一定一定要引入vue.js：

<div id="app"><p>{{ message }}</p>
</div><script>//当我们导包的时候，浏览器的内存中，就多了一个Vue构造函数var vm = new Vue({ //每次都需要new Vueel: '#app',data: { //data属性中存放的是el中要用到的数据message: 'Hello Vue.js!' //不需要手动操作dom元素}})
</script>

插值表达式{{}}、v-cloak、v-text、v-html、v-bind、v-on

<style>[v-cloak] {display: none;}
</style>
<div id="app"><!-- 使用v-cloak 能够解决插值表达式闪烁问题--><p v-cloak>-----{{ message }}--+++</p><h4 v-text="message">=-=-=-=</h4><!--区别：1.v-text会覆盖元素中原本的内容，插值表达式只会替换自己的占位符，不会把整个元素内容清空。2.v-text不会有闪烁问题，插值表达式会有闪烁问题3.v-html会解析html标签--><div>{{ message2 }}</div><div v-text="message2"></div><div v-html="message2"></div><!--v-bind: 是vue定义提供的用于绑定属性的指令 --><!--v-bind:可以简写为:  --><!--v-bind:中可以写合法的js表达式  --><input type="button" value="按钮" v-bind:title="mytitle + '123'" /><!-- vue中提供了v-on:事件绑定机制 ，注意，v-on里面也是变量，不能直接alert等等--><!-- vue中提供了v-on:事件绑定机制 ，v-on可以缩写为@，方法不需要传参可以不写括号--><input type="button" value="按钮2" :title="mytitle + '123'" v-on:click="show" /><input type="button" value="按钮3" :title="mytitle + '123'" @mouseleave="show()" />
</div><script>var vm = new Vue({el: '#app',data: {message: 'Hello Vue.js!',message2: '<h1>我是H1</h1>',mytitle: '这是自定义title'},methods: { //这个metho属性中定义了当前vue实例中所有的方法show: function() {alert('hello');}}})
</script>

学了这么多了，写一个跑马灯效果巩固一下吧

<body><div id="app"><!--<input type="button" value="浪起来" @click="lang"/>--><input type="button" value="浪起来2" @click="lang2" /><input type="button" value="停止" @click="stop" /><h4>{{ msg }}</h4></div>
</body><script>//this.数据属性名  或this.方法名，来获取当前实例的属性和方法//vue会监听data的改变,如果data改变,会立即应用到view中去（好处：只关心数据，不需要关心如何渲染到页面）var vm = new Vue({el: "#app",data: {msg: "猥琐发育，别浪~~",intervalId: null //定时器的id},methods: {lang: function() {var _this = this;//this指向问题if(this.intervalId != null) return;this.intervalId = setInterval(function() {var start = _this.msg.substring(0, 1);var end = _this.msg.substring(1);_this.msg = end + start;}, 200)},lang2() { //es6语法//箭头函数，解决this指向问题//定时器只能开一次，做判断if(this.intervalId != null) return;this.intervalId = setInterval(() => {var start = this.msg.substring(0, 1);var end = this.msg.substring(1);this.msg = end + start;}, 200)},stop() { //停止定时器clearInterval(this.intervalId);this.intervalId = null;}}})
</script>

事件修饰符（打开浏览器f12调试哦）

<style>.inner {height: 50px;background-color: chartreuse;}.out {padding: 10px;background-color: red;}
</style>
<body><div id="app"><!-- 这里点击按钮，会先触发按钮的事件，再触发div的点击事件，原因：冒泡 --><div class="inner" @click="divclk"><input type="button" @click="btnclk" value="戳我" /><!-- .stop来阻止冒泡，只触发按钮的点击事件 --><input type="button" @click.stop="btnclk" value="戳我" /><br/><!-- prevent阻止默认行为，这里阻止了a标签跳转到百度（也可以用于阻止submit） --><a href="http://www.baidu.com" @click.prevent="aclk">先去百度</a></div><div class="inner" @click.capture="divclk"><!-- capture捕获机制，先触发外层div的点击，再触发按钮的点击事件 --><!-- 这里需要在上层的div点击事件加capture<div class="inner" @click="divclk">--><input type="button" @click="btnclk" value="戳我capture" /></div><!-- self只有点击当前元素时才会触发--><div class="inner" @click.self="divclk"><input type="button" @click="btnclk" value="戳我self" /></div><!-- prevent阻止默认行为，这里阻止了a标签跳转到百度（也可以用于阻止submit） --><!-- once只会触发一次，默认行为也会只执行一次 --><!--可以串联使用 --><a href="http://www.baidu.com" @click.prevent.once="aclk">先去百度</a><!--演示.stop和.self区别--><!--.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为。--><div class="out" @click="otdivclk"><div class="inner" @click="divclk"><input type="button" @click.stop="btnclk" value="戳我" /></div></div><div class="out" @click="otdivclk"><div class="inner" @click.self="divclk"><input type="button" @click="btnclk" value="戳我" /></div></div></div>
</body>
<script>var vm = new Vue({el: "#app",data: {},methods: {btnclk() {console.log("这是按钮的点击");},divclk() {console.log("这是div点击");},aclk() {console.log("a点击了");},otdivclk() {console.log("外层div点击");}}})
</script>

v-model实操

<body><div id="app"><h4>{{ msg }}</h4><!--v-bind只能实现数据的单向绑定--><input type="text" :value="msg" /><!--v-model能实现数据的双向绑定，只能用于表单元素input,select,checkbox,textarea--><input type="text" v-model="msg" /></div>
</body>
<script>var vm = new Vue({el: "#app",data: {msg: "大家都是好学生"},methods: {}})
</script>


<body><div id="app"><input type="text" v-model="n1" /><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="n2" /><input type="button" value="=" @click="calc" /><input type="text" v-model="result" /></div>
</body>
<script>var vm = new Vue({el: "#app",data: {n1: 0,n2: 0,result: 0,opt: '+'},methods: {calc() {/*switch (this.opt){case '+':this.result = parseInt(this.n1) +parseInt(this.n2);break;case '-':this.result = parseInt(this.n1) -parseInt(this.n2);break;case '*':this.result = parseInt(this.n1) *parseInt(this.n2);break;case '/':this.result = parseInt(this.n1) /parseInt(this.n2);break;default:break;}*///eval解析字符串  投机取巧的方式，正式开发尽量少用var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'this.result = eval(codeStr);}}})
</script>

样式

外联样式

<style>.red {color: red;}.thin {font-weight: 200;}.italic {font-style: italic;}.active {letter-spacing: 0.5em;}
</style>
<body><div id="app"><h1 class="red thin">这是一个h1</h1><!--第一种方式，直接传递一个数组，注意这里需要用v-bind做绑定。如果没有该变量，用引号可以直接获取class--><h1 :class="['red', 'italic']">数组</h1><!--第二种方式：三元表达式--><h1 :class="['red', 'italic', flag ? 'active':'']">三元表达式</h1><!--第三种方式：数组中使用对象--><h1 :class="['red', 'italic', {'active':flag}]">对象</h1><!--第四种方式：直接使用对象，为class使用v-bind使用对象时候，对象属性是类名（属性可带引号可不带）；属性值为标识符--><h1 :class="{'red':flag, italic:flag,active:false}">直接使用对象</h1><h1 :class="classObj">直接使用对象</h1></div>
</body>
<script>var vm = new Vue({el: "#app",data: {flag: true,classObj: {'red': false,italic: true,active: false}},methods: {}})
</script>

内联样式

<body><div id="app"><!--对象就是无序键值对的集合--><h1 :style="{color:'red', 'font-weight':200}">这是对象</h1><h1 :style="styleObj1">这是对象</h1><!--对象数组--><h1 :style="[styleObj1, styleObj2]">这是对象数组</h1></div>
</body>
<script>var vm = new Vue({el: "#app",data: {flag: true,styleObj1: {color: 'red','font-weight': 200},styleObj2: {'font-style': 'italic'}},methods: {}})
</script>

v-if、v-show

<body><div id="app"><input type="button" value="点击" @click="toggle" /><input type="button" value="或者直接这样点击" @click="flag = !flag" /><!--v-if是每次都会重新删除或创建元素；v-show是每次不会重新删除创建元素，只是切换display:none样式v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗--><h3 v-if="flag">v-if</h3><h3 v-show="flag">v-show</h3></div>
</body><script>var vm = new Vue({el: '#app',data: {flag: true},methods: {toggle() {this.flag = !this.flag;}}})
</script>

v-for

<body><div id="app"><!--循环数字数组--><span v-for="item in list">{{ item }}</span><br /><span v-for="(item, i) in list">值：{{ item }}索引： {{ i }}</span><hr /><!--循环对象数组,i为索引--><p v-for="user in listObj">id:{{ user.id }}名字：{{ user.name }}</p><!--<p v-for="(user, i) in listObj">id:{{ user.id }}名字：{{ user.name }}</p>--><hr /><!--循环对象--><!--注意，在遍历对象身上的键值对时，除了有val，key，还有索引i--><p v-for="(val, key, i) in user">{{ val }}: {{ key }}: {{ i }}</p><hr /><!--迭代数字,从1开始，同样也有索引--><p v-for="(count, i) in 5">{{ count }} {{ i }}</p></div>
</body>
<script>var vm = new Vue({el:"#app",data:{list:[1, 2, 3, 4, 5, 6],listObj:[{ id :1, name:'z1'},{ id :2, name:'z2'},{ id :3, name:'z3'},{ id :4, name:'z4'}],user:{id:1,name:'z3',gender:'男'}},methods:{}})
</script>

<body><div id="app"><div><label>id:<input type="text" v-model="id" /></label><label>name:<input type="text" v-model="name" /></label><input type="button" value="添加" @click="add" /></div><!--注意：v-for循环的时候，key属性只能用number或string注意：key在使用的时候，必须使用v-bind绑定在组件中使用v-for，或者在一些特殊情况中，必须使用key--><p v-for="item in list" :key="item.id"><input type="checkbox" value="item.id" /> ------{{ item.id }}----{{ item.name }}</p></div>
</body>
<script>var vm = new Vue({el: "#app",data: {id: '',name: '',list: [{id: 1,name: 'z1'},{id: 2,name: 'z2'},{id: 3,name: 'z3'},{id: 4,name: 'z4'}]},methods: {add() {this.list.unshift({id: this.id,name: this.name}); //前插入}}})
</script>

VUE—从入门到飞起（一）相关推荐

VUE—从入门到飞起（五）
目录路由路由基本使用路由规则中定义参数路由嵌套命名视图实现经典布局 VUE-从入门到飞起(一) VUE-从入门到飞起(二) VUE-从入门到飞起(三) VUE-从入门到飞起(四) VUE-从 ...
VUE—从入门到飞起（四）
目录组件组件创建方式组件中的data和methods 组件切换方式父组件向子组件传值父组件把方法传递给子组件案例:评论添加及列表显示 ref获取dom和组件 VUE-从入门到飞起(一) V ...
VUE—从入门到飞起（三）
目录动画显示隐藏(不使用动画) 使用过渡类名使用第三方类animate.css实现动画使用钩子函数模拟小球半场动画列表动画 VUE-从入门到飞起(一) VUE-从入门到飞起(二) VUE-从 ...
VUE—从入门到飞起（二）
目录过滤器filter vue-resource发送http请求 axios发送http请求 VUE生命周期 VUE生命周期钩子函数自定义指令 watch computed VUE-从入门到飞起( ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
weblogic从入门到飞起（部署应用、日志）（六）
目录 server日志位置部署应用程序的过程自动部署(只能应用于开发模式)(只能发布到管理服务器): 控制台部署: 命令行部署: 还可以用wstl: weblogic从入门到起飞!(weblogi ...
Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的"入门",就算是"入门指南&quo ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...

VUE—从入门到飞起（一）

基础

起步

插值表达式{{}}、v-cloak、v-text、v-html、v-bind、v-on

学了这么多了，写一个跑马灯效果巩固一下吧

事件修饰符（打开浏览器f12调试哦）

v-model实操

样式

外联样式

内联样式

v-if、v-show

v-for

VUE—从入门到飞起（一）相关推荐

最新文章

热门文章