Vue.start 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        #app4{
            padding: 50px;
        }
        .banner{
            width: 600px;
            height: 150px;
            border-radius: 20px;
            box-shadow: 5px 5px 10px #888888;
            font-size: 32px;
            text-align: center;
            color: white;
            background-color: lightblue;
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <DIV id="app2">
        <p>{{name}}</p>
        <!--v-model用在input上，类似于value,当input中value改变时{{name}}随着改变-->
        <input type="text" v-model="name" id="inp"/>
    </DIV>
    <div id="app3">
        <h1>{{title}}</h1>
    </div>
    <div id="app4">
        <div class="banner">
            {{text | tranformFilter}}
        </div>
    </div>
    <script>
      var ap= new Vue({
          //每一个Vue应用都是通过用Vue函数创建一个新的Vue实例
            el:'#app',
            //数据储存
            data:{
                message:"hollo world"
            }
        })     
        var ap2=new Vue({
            el:'#app2',
            data:{
                name:"hollo"
            }
        })
        //生命周期钩子函数
        //created重新给title进行赋值
        //mounted:这时 el 被新创建的 ap3.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内.该钩子在服务器端渲染期间不被调用。
        var ap3=new Vue({
            el:'#app3',
            data:{
                title:"hole"
            },
            created:function(){
                this.title="生命周期钩子函数";
                console.log("created()钩子函数执行");
            },
            mounted:function() {
                console.log(this.$el);
                console.log("规模title的值",this.title);
                console.log("mounted()钩子函数执行");
            }
        })
        //过滤器
        var cm=new Vue({
            el:'#app4',
            data:{
                text:"I love ficesh"
            },
            /*过滤器
            Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
            过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 
            <!-- 在双花括号中 -->
            {{ message | capitalize }}

            <!-- 在 `v-bind` 中 -->
            <div v-bind:id="rawId | formatId"></div>
           1.f 内置文本过滤器
            替换 capitalize 过滤器
            text[0].toUpperCase() + text.slice(1)
            替换 uppercase 过滤器
            text.toUpperCase()
            替换 lowercase 过滤器
            text.toLowerCase()
            */
            filters:{
                tranformFilter:function(val){
                    var strs=val.split(" ")
                    var result="";
                    for(var i=0;i<strs.length;i++){
                        result+=strs[i].charAt(0).toUpperCase()+strs[i].substring(1)+" ";
                    }
                    return result;
                }
            }
        })
    </script>
</body>
</html>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

2.第二种元素绑定

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

3.v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

 

posted @ 2021-05-03 15:22  山君与见山  阅读(148)  评论(0)  编辑  收藏  举报