Vue基础部分笔记
发布日期:2021-11-02 02:26:42 浏览次数:0 分类:技术文章

Vue

Vue就是基于MVVM模式实现的一套js框架(函数库),在vue中:Model:指的是js中的数据,如对象,数组等等。View:指的是页面视图

Vue.js 的目标是通过尽可能简单实现响应的数据绑定和组合的视图组件

1.vue的基本使用
  • 提示:

    • { {两个大括号之间不能有空格(标准胡子语法)
    • vue的代码一般写在要控制的标签下面,写在body中也是可以的,因为他没有入口函数.
<!--引入Vue.js--><script src="./js/vue.min.js"></script><!-- vue显示数据:从胡子语法开始{
   {data}} --><div id='app'>{
  {str}}</div><script>    var vm = new Vue({
                    el: '#app',  // Vue要控制的标签                // Vue要绑定的数据        data: {
                str: 'hello ' //最终div中显示的数据为 hello        }    })</script>
2、Vue的模板语法
  • Vue显示数据方法
<body>    <!-- Vue数据显示方法-->    <div id="app">        <div>{
  { str }}</div>        <p>{
  { str.split('').reverse().join('') }}</p>        <span>{
  { num+1 }}</span>                <!-- 三元运算符  三元表达式 -->  <!-- 条件?条件成立:条件不成立 -->                <div>{
  { bool?'成立':'不成立' }}</div>            </div>    <script>        var vm = new Vue({
                el: '#app',            data: {
                    str: 'abcdefg',                num: 0,                bool: false            }        }        )    </script></body>
  • Vue控制html属性
<body>    <!-- 数据显示方法  vue控制html属性  绑定事件和vue封装函数 -->    <div id="app">        <!-- v-xx -- 指令:具备特殊功能的语法   -->                <a v-bind:href="url1">百度</a>  <!-- v-bind 完整写法控制html属性 -->                <a :href="url2">淘宝</a>  <!-- : 化简写法控制html属性 -->    </div>    <script>        var vm = new Vue({
                el: '#app',            data: {
                    str: 'abcdefg',                num: 0,                bool: true,                url1: 'http://www.baidu.com',                url2: 'http://www.taobao.com'            }        })    </script></body>
  • Vue绑定事件
       <!-- 绑定事件和vue封装函数 -->       <div id="app">           <span>{
  { num+1 }}</span>           <br>                      <button v-on:click="num += 1">按钮</button>              <button @click="num+=1">按钮(化简写法)</button>  <!-- 绑定事件主要写法 @事件类型="要执行的函数"-->                      <button @click="fnAdd()">调用函数:num自增</button> <!-- 调用函数的时候,如果没有参数可不写小括号-->       </div>       <script>       var vm = new Vue({
               el:'#app',           data:{
                   num: 0           },           methods:{
                   // 封装函数               // 函数名: 匿名函数               fnAdd:function(){
                       // num 累加1                   this.num += 1               }           }       })       </script>
3、Vue控制class属性

使用v-bind指令来设置元素的class属性或者sytle属性,它们的属性值可以是表达式,vue.js在这一块做了增强

    <!-- el  data: 只要数据变,页面视图就变 -->    <div id="app">       <!-- class属性:字典  对象   列表 -->		<!-- 字典:{'类名':布尔值} true添加类 false不添加类 -->		<div :class="{
    'myclass1':bool1,'myclass2':bool2}">111</div>				<!-- 对象:key是真实的类名,如果取值true则添加类 -->		<div :class="myobject">222</div>		<!-- 列表,将列表中的键锁对应的值添加类 -->		<div :class="[mynames1,mynames2]"></div>		<!-- 三元运算符 bool1为true时 为abc  bool1为false时添加fgh -->		<div :clas="[bool1 ? 'abc' : 'fgh' ]"></div>    </div>    <script>        var vm = new Vue({
                el: '#app',            data: {
                    bool1: true,                bool2: false,                myobject: {
                        class1: true,                    class2: false                },                mynames1: 'aaa',                mynames2: 'bbb'            }        })    </script>
上一篇:Vue的条件渲染和对象渲染
下一篇:Ajax跨域请求与解决方案