监听值的变化及render方法的使用

文章目录

          • 1、使用方法获取值的改变
          • 2、使用watch监听值的改变
          • 3、使用computed做简单的计算
          • 4、使用vue实例中render方法渲染模板

1、使用方法获取值的改变
2、使用watch监听值的改变
3、使用computed做简单的计算
<body>
        <div id="app">
            <input type="text" name="" id="" v-model="firstName" @keyup="getData">
            <input type="text" name="" id="" v-model="lastName" @keyup="getData">
            <input type="text" name="" id="" v-model="fullName" @keyup="getData">
            
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                firstName:'',
                lastName:'',
                fullName:'',
                getFullName:''
            },
            methods:{
                getData(){    //主要的用于逻辑的处理
                    this.fullName = this.firstName +'-'+this.lastName
                }
            },
            watch:{            /* 可用于监听路由的改变 */
                'firstName':function(newVal,oldVal){    /* 两个形参为新的值和旧的值 */
                    this.firstName = newVal +'-' +this.firstName
                },
                'lastName':function(newVal,oldVal){
                    this.getFullName = newVal + '-' +this.firstName
                }
            },
            computed:{        //主要用于简单的计算
                'getFullName':function(){
                    return this.firstName +'-' +this.lastName
                }
            }
        })
    </script>
<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>


    <!-- 容器 -->
    <router-view></router-view>


  </div>


  <script>
    // 2. 创建子组件
    var login = {
      template: '

这是登录子组件,这个组件是 奔波霸 开发的。

'
} var register = { template: '

这是注册子组件,这个组件是 霸波奔 开发的。

'
} // 3. 创建一个路由对象 var router = new VueRouter({ routes: [ // 路由规则数组 { path: '/', redirect: '/login' }, { path: '/login', component: login }, { path: '/register', component: register } ], linkActiveClass: 'myactive' // 和激活相关的类 }) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, // router: router router, watch: { // this.$route.path '$route.path': function (newVal, oldVal) { // console.log(newVal + ' --- ' + oldVal) if (newVal === '/login') { console.log('欢迎进入登录页面') } else if (newVal === '/register') { console.log('欢迎进入注册页面') } } } }); </script> </body>
4、使用vue实例中render方法渲染模板
			render只能渲染当前模板对象的内容,模板外的内容不能渲染
<body>
  <div id="app">
    <p>444444</p>
  </div>


  <script>


    var login = {
      template: '

这是登录组件

'
} // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, render: function (createElements) { // createElements 是一个 方法,调用它,能够把 指定的 组件模板,渲染为 html 结构 return createElements(login) // 注意:这里 return 的结果,会 替换页面中 el 指定的那个 容器 } }); </script>

你可能感兴趣的:(Vue)