这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要介绍了 vue 快捷键与基础指令详解, 需要的朋友可以参考下
v-bind 可以简写成 :
- <img src="{{url}}">→<img :src="url" :width="50px">
- v-on:click可以写成@click
- <button @click="up()"></button>
v-if 实例 可以通过对对象操作条件来实现想要展示的效果
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script type="text/javascript" src="js/vue.min.js"></script>
- </head>
- <body>
- <div id="app">
- <p v-if="seen">现在你看到我了</p>
- <template v-if="ok">
- <h1>天气炎热</h1>
- </template>
- </div>
- <script>
- new Vue({
- el: "#app",
- data: {
- seen:false,
- ok: true
- }
- })
- </script>
- </body>
- </html>
v-for 实例:v-for 是可以做循环数组使用的
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script type="text/javascript" src="js/vue.min.js"></script>
- </head>
- <body>
- <div id="app">
- <ol>
- <li v-for="x in lists">{{x.title}}</li>
- </ol>
- </div>
- <script>
- new Vue({
- el: "#app",
- data: {
- lists: [
- { id: 1, title: "臧三" },
- { id: 2, title: '李四' },
- { id: 3, title: "王五" },
- ]
- }
- })
- </script>
- </body>
- </html>
v-show 实例:v-show 可以操作 true/false 来实现效果
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script type="text/javascript" src="js/vue.min.js"></script>
- </head>
- <body>
- <div id="app">
- <input type="button" value="点击" v-on:click="a=false" />
- <div style="width: 100px;height: 100px;background: red;" v-show="a">
- </div>
- </div>
- <script>
- new Vue({
- el: "#app",
- data: {
- a: true
- }
- })
- </script>
- </body>
- </html>
:class 实例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue.js">
- </script>
- <style>
- .red{ color:red } .blue{ background: blue; }
- </style>
- </head>
- <body>
- <div id="app">
- <p :class="{red:a,blue:b}">
- 我是123
- </p>
- </div>
- <script>
- new Vue({
- el: "#app",
- data: {
- a: true,
- b: true
- }
- })
- </script>
- </body>
- </html>
第二种方法
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue.js">
- </script>
- <style>
- .red{ color:red } .blue{ background: blue; }
- </style>
- </head>
- <body>
- <div id="app">
- <p :class="json">
- 我是123
- </p>
- </div>
- <script>
- new Vue({
- el: "#app",
- data: {
- json: {
- red: true,
- blue: true
- }
- }
- })
- </script>
- </body>
- </html>
以上所述是小编给大家介绍的 vue 快捷键与基础指令详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0812/338899.html