vue 框架，入门必看

vue 的入门

el 的挂载点：

el 是用来设置vue实例挂载，（管理）的元素
vue会管理el选项命中的元素以及内部的后代元素
可以使用其他的选择器，但是不建议使用ID选择器
可以使用其他的双标签，不能使用HTML和body

data：数据对象

vue 中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂数据时，遵守js的语法即可
code

 1   <div id="app">
 2           {{message}}
 3           <h2>{{school.name}}{{school.age}}</h2>
 4            <ul>
 5                <li>{{ campus[0] }}</li>
 6                <li>{{ campus[1] }}</li>
 7                <li>{{ campus[2] }}</li>
 8            </ul>
 9         </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
10     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
11     <script>
12         var app = new Vue({
13             el:'#app',
14             data:{
15                 message:"hello vue",
16                 school:{
17                     name:"柚子小哥哥",
18                     age:"20"
19                 },
20                 campus:['苏州','上海','北京']
21             },
22         }) 
23      </script>

v-text

v-text 指令的作用就是：设置标签的内容（textContent）
默认写法会替换全部内容，使用差值表达是｛｛｝｝可以替换指定内容
code

 1     <div id="app">
 2         <h2 v-text="message+'嘻嘻'"></h2>
 3         <h2 v-text='info'></h2>
 4     </div>
 5 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7     <script>
 8         var app = new Vue({
 9             el:"#app",
10             data:{
11                 message:"柚子小哥哥!!!",
12                 info:"Hello vue"
13             }
14         })
15     </script>

v-html

v-html 指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text 指令无论内容是什么，只会解析为文本
code

 1    <div id="app">
 2        <p v-html='content'></p>
 3        <p v-text='content'></p>
 4     </div>
 5     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 6    <script>
 7        var app = new Vue({
 8            el:"#app",
 9            data:{
10                content:"<a href='https://www.cnblogs.com/yjzs/'>柚子小哥哥的博客园</a> "
11            }
12        })
13    </script>

v-on

v-on 指令的作用是：为元素绑定事件
事件名称不需要写on
指令可以简写为@
绑定的方法定义在 methods 属性中
方法的内部通过this关键子可以访问定义在data中数据
事件绑定的方法写成函数调用的形式，可以传递自定义参数
定义方法是需要形参来接受传入的实差参
事件的后面根上修饰符可以对事件进行限制
.enter 可以限制触发的按键的为回车
code

 1    <div id="app">
 2       <input type="button" value="v-on指令" v-on:click="doIt" />
 3       <input type="button" value="v-on简写" @click="doIt" />
 4       <input type="button" value="双击事件" @dblclick="db" />
 5       <input type="text" @keyup.enter="say" />
 6       <p @click="changeFood">{{food}}</p>
 7     </div>
 8     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9     <script>
10       var app = new Vue({
11         el: "#app",
12         data: {
13           food: "柚子小哥哥！",
14         },
15         methods: {
16           doIt: function () {
17             alert("绑定点击事件");
18           },
19           db: function () {
20             alert("绑定双击事件！");
21           },
22           changeFood: function () {
23             // console.log(this.food);
24             this.food += "好帅啊。";
25           },
26           say: function () {
27             alert("绑定回车事件！");
28           },
29         },
30       });
31     </script>

v-show

v-show 指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display实现显示隐藏
指令后面的内容，最终都会解析会布尔值为true元素，值为false元素为隐藏
code

 1   <div id="app">
 2       <input type="button" value="切换显示状态" @click="ChangeShow" />
 3       <input type="button" value="累加" @click="add" />
 4       <img v-show="isShow" src="./img//7735908_161703348144_2.jpg" alt="" />
 5       <img v-show="age>=18" src="./img//7735908_161703348144_2.jpg" alt="" />
 6     </div>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8     <script>
 9       var app = new Vue({
10         el: "#app",
11         data: {
12           isShow: false,
13           age: 17,
14         },
15         methods: {
16           ChangeShow: function () {
17             this.isShow = !this.isShow;
18           },
19           add: function () {
20             this.age++;
21           },
22         },
23       });
24     </script>

v-if

v-if 指令的作用就是：根据表达式的真假切换元素的显示状态
本质是通过 DOM 元素老切换显示状态
表达式的值为true，元素存在与DOM树中，为false,从DOM中移除
code

 1  <div id="app">
 2       <input type="button" @click="Show" value="切换显示" />
 3       // v-if 操作的是DOM树 
 4       <p v-if="isShow">柚子小哥哥</p>
 5       // v-show操作的是样式 
 6       <p v-show="isShow">v-show</p>
 7       <p v-show="like>10">不喜欢</p>
 8     </div>
 9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10     <script>
11       var app = new Vue({
12         el: "#app",
13         data: {
14           isShow: false,
15           like:20
16         },
17         methods: {
18           Show: function () {
19             this.isShow = !this.isShow;  
20           },
21         },
22       });
23     </script>

v-bind

v-bind 指令的作用就是：为元素绑定属性
完整的写法是 v-bind 属性名
简写的话直接省掉v-bind ，只保留：属性名
需要动态的增删class建议使用对象的方式
code

 1   <div id="app">
 2       <img v-bind:src="imgSrc" alt="" />
 3       <br />
 4       <img
 5         :src="imgSrc"
 6         alt=""
 7         :title="imgTitle"
 8         :class="{Ac:Active}"
 9         @click="Active"
10       />
11     </div>
12     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
13     <script>
14       var app = new Vue({
15         el: "#app",
16         data: {
17           imgSrc: "./img//7735908_161703348144_2.jpg",
18           imgTitle: "柚子小哥哥",
19           isActive: false,
20         },
21         methods: {
22           Active: function () {
23             this.isActive = !this.isActive;
24           },
25         },
26       });
27     </script>

v-for

v-for 指令的作用就是：根据数据生成的列表结构
数组经常v-for结合使用
语法是（item,index）in 数据
item 和 index 可以结合使用其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
code

 1  <div id="app">
 2           <input type="button" value="增加数据" @click='add'>
 3           <input type="button" value="移除数据" @click='rem'>
 4          <ul>
 5              <li v-for='(item,index) in arr'>
 6                   {{index+1}}    {{item}}  
 7              </li>
 8          </ul>
 9          <h1 v-for=' item in age' v-bind:title='item.p'>
10              {{item.p}}
11          </h1>
12       </div>
13     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
14      <script>
15          var app = new Vue({
16              el:"#app",
17              data:{
18                  arr:['广东','上海','苏州'],
19                  age:[
20                      {p:"20"},
21                      {p:'30'},
22                      {p:"40"}
23                  ]
24              },
25              methods:{
26                  add:function(){
27                      this.age.push({p:'岁'})
28                  },
29                  rem:function(){
30                      this.age.shift()
31                  }
32              }
33          })
34      </script>

v-model （双向绑定）

v-model 指令的作用是便捷和获取表单元素的值
绑定的数据和表单值相关联
绑定的数据《》表单元素的值
code

 1  <div id="app">
 2          <input type="button" value="修改mesage" @click='Modifies' >
 3          <input type="text" v-model='message' >
 4          <h3>{{message}} </h3>
 5 
 6      </div>
 7      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8      <script>
 9          var app = new Vue({
10              el:"#app",
11              data:{
12                 message:"柚子小哥哥"
13              },
14              methods:{
15                 Modifies:function(){
16                     this.message='修改内容！'
17                 }
18              }
19          })
20      </script>

总结：

创建vue实例中，el(挂载点),data （数据），methods （方法）
v-on 指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text 指令的作用是：设置元素的文本值，简写为｛｛｝｝
v-html指令的作用是：设置元素的innerHtml

数量增加的案例

 1    <div id="app">
 2     <button @click="sub">-</button>
 3       <span> {{num}} </span>
 4       <button @click="add">+</button>
 5     </div>
 6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7     <script>
 8       var app = new Vue({
 9         el: "#app",
10         data: {
11           num: 1,
12         },
13         methods: {
14           add: function () {
15             // console.log('add')
16             if (this.num < 5) {
17               this.num++;
18             } else {
19               alert("最多点5下");
20             }
21           },
22           sub: function () {
23             // console.log('sub')
24             if (this.num > 0) {
25               this.num--;
26             } else {
27               alert("负数点不了");
28             }
29           },
30         },
31       });
32     </script>

posted @ 2020-04-18 01:20 柚子小哥哥阅读(401) 评论(0) 编辑收藏举报

刷新页面返回顶部

柚子小哥哥

vue 框架，入门必看

vue 的 入门

el 的挂载点：

data： 数据对象

v-text

v-html

v-on

v-show

v-if

v-bind

v-for

v-model （双向绑定）

总结：

数量增加的案例

公告

vue 的入门

data：数据对象