Vue的基本语法笔记(一)

来源:xiaoger 发布时间:2020-03-30 21:28:40 作者:admin 阅读量:231

Vue使用前准备


使用Vue需要导入的东西:

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

基本使用方法


  • 使用的标签元素需要被Vue托管,标签元素除了单标签以及<html>和<body>外,基本标签都行,托管方式为:
<div id="vue_det">    //id值就是被vue识别的依据,也可以写class
    <h1>site : {{site}}</h1>    //{{}}两个大括号中间可以取出Vue中设定的值
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>      //函数也可以取出来
</div>
<script type="text/javascript">
    var vm = new Vue({       //实例化一个Vue对象
        el: '#vue_det',      //el参数代表绑定的节点,和css选择器一样,id用#,class用.
        data: {              //data属性里面一般设定一些值和变量,可以为复杂类型,比如数组等。
            site: "标题",     //这些什么site,url都是自己起的名字,相当于自定义的变量。
            url: "www.baidu.com",
            alexa: "10000"
        },
        methods: {      //这个methods里写逻辑
            details: function() {     //details代表函数名,后面那个function()是固定写法。
                return  this.site + "vue学习笔记";   //this.site可以获取上面定义好的变量。
            }
        }
    })
</script>


Vue的一些模板语法


  • v-html  说白了就是输出语句中如果含有html标签,就会解析html标签,而不会将html标签像字符串一样输出来。
<div id="app">
    <div v-html="message"></div>   //v-html就是能够解析html标签,展示标签样式而已
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>这个不会将h1标签输出来</h1>'
  }
})
</script>

  • v-bind 和v-model   这两个指令功能很像
1.v-bind用来绑定数据和属性以及表达式,缩写为':'

2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>                                //v-model就是可以实时控制use的值
  <div v-bind:class="{'class1': use}">    //其实就是控制class="class1"这个使不使用,
    v-bind:class 指令                     //取决于use的布尔值,
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

  • v-text  这个其实就是普通的输出指令
  • v-if 这个就是判断语句,为true就显示节点,反之就不显示
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true    //这里设置为true
  }
})
</script>

  • v-on  这个其实就是监听事件一般常用的就是v-on:click可以简写为@:click,就是点击后触发事件。
  • v-show  就是显示与不显示,布尔值来判断。
  • v-for  就是循环指令,用法如下:
<div id="app">
  <ol>
    <li v-for="site in sites">    //sites代表要循环的对象,感觉和python循环差不多
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>


Vue计算属性


计算属性关键词: computed。

我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。


修饰符


  •  .lazy 这个修饰符就是不让输入框中值或者数据同步,按回车可以同步
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >     //说白了就是不是实时的
  •  .number  可以用来自动将用户输入的值转为Number类型
<input v-model.number="age" type="number">
  •  .trim   自动过滤用户输入的首尾空格
<input v-model.trim="msg">

Original article, reproduced please specify:Vue的基本语法笔记(一) | xiaoger

(本站所有资源来源于网络,仅供学习交流使用,本站不承担关于本资源的任何法律责任。)

我要评论 登录后才能发布评论

  Article archive

感谢鲶鱼博客提供的模板   我要留言
中央许可免备案
Catfish(鲶鱼) CMS V 6.2.6