一 Vue框架简介
Vue是一个构建数据驱动的web界面的渐进式框架。
目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件
1 <div id="app">
2 <span>你的名字是{{name}}</span>
3 </div>
4 var app=new Vue({
5 el: ‘#app‘,
6 data:{
7 name:‘wdb‘
8 }
9 })
二 Vue指令
Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，
它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。
1.v-text v-html
1 <body>
2 <div id="app">
3 <p v-text="name"></p>
4 <div v-html="hobby"></div>
5 </div>
6 const app=new Vue({
7 el: ‘#app‘,
8 data:{
9 name:‘wdb‘,
10 hobby:`
11 <ul>
12 <li>抽烟</li>
13 <li>喝酒</li>
14 <li>烫头</li>
15 </ul>
16 `
17 }
18 })
19 </body>
2.v-for
1 <div id="app">
2 <h3>{{name}}</h3>
3 <p>他喜欢的运动是:</p>
4 <ul>
5 <li v-for="(index,sport) in sports" :key="index">{{index}}{{sport}}</li>
6 </ul>
7 <ul>
8 <li v-for="item in array">姓名:{{item.name}} 年龄:{{item.age}} 职业:{{item.job}}</li>
9 </ul>
10 </div>
11 <script>
12 const app=new Vue({
13 el:‘#app‘,
14 data:{
15 name:‘王东波‘,
16 sports:[‘football‘,‘basketball‘,‘volleyball‘],
17 array:[{
18 name:‘wdb‘,
19 age:22,
20 job:‘engineer‘
21 }]
22 }
23 })
24 </script>
3.v-if
1 <div id="app">
2 <div v-if="level==‘high‘">
3 <h2>this is high level!</h2>
4 </div>
5 <div v-else-if="level==‘normal‘">
6 <h2>this is normal level!</h2>
7 </div>
8 <div v-else>
9 <h2>sorry!</h2>
10 </div>
11 </div>
12 <script>
13 const app=new Vue({
14 el:‘#app‘,
15 data:{
16 level:‘normal‘,
17 }
18 })
19 </script>
4.v-show 操作的是display属性
1 div>
2 <div v-show="app">
3 <h2>王东波</h2>
4 </div>
5 </div>
6 <script>
7 const app=new Vue({
8 el:‘#app‘,
9 data:{
10 is_show:true,
11 }
12 })
13 </script>
5.v-on v-bind v-bind : v-on @
1 <div id="app">
2 <p class="alex_color" :class="{bg:is_green}">alex</p>
3 <button @click="my_click(123)">点击变绿</button>
4 </div>
5 <script>
6 const app=new Vue({
7 el:‘#app‘,
8 data:{
9 is_green:false,
10 },
11 methods:{
12 my_click:function (data) {
13 this.is_green=!this.is_green;
14 },
15 }
16 })
17 </script>
6.v-model
1 <div id="app">
2 <input type="text" v-model="input"> {{input}}
3 <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea> {{article}}
4 <select name="" v-model="lady" multiple>
5 <option value="first">小苍</option>
6 <option value="second">小波</option>
7 <option value="third">小麻</option>
8 </select>
9 {{lady}}
10 </div>
11 <script>
12 const app=new Vue({
13 el:‘#app‘,
14 data:{
15 input:‘‘,
16 article: ‘‘,
17 lady:[‘first‘,‘third‘]
18 }
19 })
20 </script>
7.指令修饰符 -- .number -- .lazy -- .trim
1 <div id=‘app‘>
2 用户名: <input type="text" v-model.lazy.trim="username"><br>
3 {{username}}
4 手机号: <input type="text" v-model.number="phone"><br>
5 {{phone}}
6 </div>
7 <script>
8 var app = new Vue({
9 el: ‘#app‘,
10 data: {
11 username: "",
12 phone: "",
13 },
14 });
15 </script>
8.自定义的指令
9.计算属性
原文地址：https://www.cnblogs.com/wdbgqq/p/9833751.html
时间： 2024-10-09 08:12:38