前端Vue.js知识小节

一、模块语句

1、v-html="mess(名字随意)"

                 如:mess:'<h1>这是一个h1标签</h1>'

2、v-bind:class="{ 样式名:true/false }"

      如:样式必须为类class,ID则不可以

             .class1{ color:red; }

3、v-if:="自定义名称"

      如:seen:true

           判断是true/false 若true就显示,false就隐藏

4、v-bind:href="地址名称"

      如:url:"www.baidu.com" 可跳转到相应的页面

5、v-on:click="方法名"

      如:点击事件的方法名称

6、v-model:="名称(mess)"

     如:mess:'hello vue.js'   双向绑定事件

7、@click="点击事件的方法"

      如:字符串翻转事件

            reverseMessage(){ this.mess=this.mess.split('').reverse().join('') }

            以空格为分界线进行文字的翻转,在把翻转过的文字添加进去即可

8、过滤器(filters)

            如:过滤器接受表达式的值作为第一个参数

           即过滤器就是一个方法,会执行此方法

9、动态添加代码样式

         使用三元表达式进行判断

         如::calss=" { index==0 ? style1 : style2 } "

         如果点击的下标为0 就显示style1的样式,否则就是style2的样式

二、条件语句

1、v-if:判断表达式的值是true/false,判断是否执行此语句(v-if只是隐藏dom节点)

2、v-else:需要和v-if连用

      如:相当于if-else的判断

3、v-else-if:相当于普通else if的应用,判断条件是否允许是否执行

4、v-show:是否显示,看值是true/false (频繁切换时使用,v-show它会删除dom节点)

5、v-if、 v-else、 v-else-if 的判断使用

      ①:若三者合在一起使用

             若不满足v-if的条件,就去执行v-else-if中的条件,

             若v-else-if的条件不满足,就去执行v-else的条件

       ②:若v-if与v-else连用

              此判断就相当于if-else的条件,不满足if就去执行else的条件

三、循环语句      v-for

四、路由(router-link router-view)

            ①:router-link:是一个组件,用于设置一个导航链接,切换不同的页面内容,to的属性为目标地址,即是要显示的页面

            ②:router-view:路由匹配的组件(即是router-link中to的属性值)将在这里渲染

            ③:需要在index.js下配置路径,引入要显示的页面,在routers路由中同页面代码配置相对应的地址,要是页面中的子路由配置路径时需要用children来配置

            ④:还可以通过点击事件进行路由的跳转,this.$router.push({ path:'路径',name:'要跳转的路径页面' });

简易: 

  1、v-model:双向绑定

  2、v-for:循环(对数组的循环)

  3、v-show:显示或隐藏(true:显示,false:隐藏)

  4、v-if:显示隐藏(true:删除dom节点,false:不删除dom节点)

  5、v-else-if:必须与v-if连用

  6、v-else:必须和v-if连用 不能单独使用 否则报错 模板编译错误

  7、v-bind:动态绑定(及时对页面的数据进行更改)

  8、v-on:绑定事件(函数必须写在methods里面)

        @click:快捷方法

  9、v-text:解析文本

  10、v-html:解析HTML标签

  11、v-bind:class 三种绑定方法

          ①:对象性 { red:isred }

          ②:三目型 { isred?red:isred }

          ③:数组型 [ { red:isred },{ blue:isblue } ]

  12、v-once:进入页面 只渲染一次 不在进行渲染

  13、v-clock:防止闪烁

  14、v-pre:把标签内部的元素原位输出

猜你喜欢

转载自blog.csdn.net/weixin_41909712/article/details/87620370