vue 指令

v-text和v-html的区别：
v-text :会进行转译
v-html：不会进行转译

v-html demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
  <div id="first">
        <div v-html="content"></div>
  </div>
  <script>
      new  Vue({
        //绑定上面的id el指的是vue实例跟哪个dom节点绑定
        el:"#first",

        data:{
         content:"<h1>愿所有努力不被辜负</h1>"
        }
      })
  </script>
</body>
</html>

　　效果：

 

v-text demo :

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
  <div id="first">
        <div v-text="content"></div>
  </div>
  <script>
      new  Vue({
        //绑定上面的id el指的是vue实例跟哪个dom节点绑定
        el:"#first",

        data:{
         content:"<h1>愿所有努力不被辜负</h1>"
        }
      })
  </script>
</body>
</html>

　　效果：

 

v-on:给元素绑定click事件，触发handleClick方法，定义在vue实例的methods

v-on：给元素绑定click事件
v-on:click="handleClick"：触发handleClick方法
methods: 定义在vue实例的methods被调用
通过this.content 改变实例里面数据 vue实例尖听数据的改变 更新模板
this.content="加油 是的"

 

demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
  <div id="first">

        <div v-on:click="handleClick">{{content}}</div>
  </div>
  <script>
      new  Vue({
        //绑定上面的id el指的是vue实例跟哪个dom节点绑定
        el:"#first",
        data:{
              content:"明天会更好"
        },
        methods: {
          handleClick: function(){
             this.content="加油 是的"
          }
        }
      })
  </script>
</body>
</html>

效果：

 

 

 2018-05-01    11:59:31

posted @ 2018-05-01 12:00  1点  阅读(147)  评论(0)  编辑  收藏  举报