Vue基础(1)-CSDN博客

本文链接：https://blog.csdn.net/xiaomin_er/article/details/106229355

1.vue入门小案例

渐进式JavaScript框架

cdn下载
npm下载

<div id="box">
        {
  {10+20}}
        <p>{
  {myname}}</p>
    </div>
    <div>
        {
  {10+20}}
    </div>
    <script src='../js/vue.js'></script>
    <script>
        var vm = new Vue({
            el:"#box", //vue渲染开始的地方
            data:{
                myname:"xiaoming",
            }//状态
        })
    </script>
</body>

2.vue插值

(1)插值
a.文本{ {}}
b.纯HTML
v-html,防止XSS.csrf (
(1)前端过滤
(2)后台转义（<><>)
(3)给cookie加上属性http)
c.表达式

<body>
    <div id="box">
        {
   {
   10+20}}
        {
   {
   10>20?'aaa':'bbb'}}
        {
   {
   myname}}
        {
   {
   myhtml}}
        <div v-html="myhtml"></div>
    </div>
    <script src=../js/vue.js></script>
    <script>
        new Vue({
   
            el:"#box",
            data:{
   
                myname:"xiaoming",
                myhtml:"<b>11111</b>"
            }
        })
    </script>
</body>

运行结果

3.v-if v-show

v-if:动态创建与删除
v-show:动态显示与隐藏

 <div id="box">
        <div v-html="myhtml"></div>
        <div v-show='myshow'>动态显示与隐藏</div>
        <div v-if='mycreate'>动态创建与删除</div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
   
            el:"#box",
            data:{
   
                myhtml:"<i>斜体</i>",
                myshow:true,
                mycreate:true
            }
        })
    </script>

4.vue-class绑定

<div id="box">
      <div style="background-color: yellow;">111111</div>
      <h2>{
   {
   message}}</h2>
      <h2>{
   {
   message}}</h2>
      <button @click="handleClick()">点击</button>
      <div :class="isActive?'red':'yellow'">三目写法</div>
      <div :class="classobj">对象写法</div>
      <div :class="classarr">数组写法</div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var vm = new Vue({
   
        el: "#box",
        data: {
   
          message: "hello world",
          isActive: true,
          classobj: {
   
            a: true,
            b: true,
          },//对象写法填写并不会get set属性拦截
          classarr: ["a", &#