vue实例 1.vue实例创建语法 var app&＃61; new Vue({})
2. el vue实例中必不可少的一个选项就是 el。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue 实例&＃xff0c;它可以是 HTMLElement &＃xff0c;也可以是 css 选择器.
< htmllang &＃61; " en" > < head> < metacharset &＃61; " UTF-8" > < metaname &＃61; " viewport" content &＃61; " width&＃61;device-width, initial-scale&＃61;1.0" > < title> title > head > < body> < divid &＃61; " app" > < buttonv-on: click&＃61; " handleClick" > button > div > < scriptsrc &＃61; " vue.js" > script > < script> var app &＃61; new Vue ( { el: "#app" , data: { msg: &＃39;hehe&＃39; } , methods: { handleClick: function ( ) { alert ( &＃39;你好世界&＃39; ) ; } } } ) script > body > html >
3. data 通过 Vue 实例的 data 选项&＃xff0c;可以声明应用内需要双向绑定的数据。建议所有会用到的数据都 预先在 data 内声明&＃xff0c;这样不至于将数据散落在业务逻辑中&＃xff0c;难以维护。
3.1 插值{{name}} 在{{}}中&＃xff0c;除了简单的绑定属性值外&＃xff0c;还可以使用 Javascript 表达式进行简单的运算、 三元运 算等
< htmllang &＃61; " en" > < head> < metacharset &＃61; " UTF-8" > < metaname &＃61; " viewport" content &＃61; " width&＃61;device-width, initial-scale&＃61;1.0" > < title> title > head > < body> < h1> {{name}}
h1 > < h1> h1 > < h1> h1 > div > < scriptsrc &＃61; " vue.js" > script > < script> var app &＃61; new Vue ( { el: "#app" , data: { name: "你好" , okFlag: false , text: &＃39;123,456&＃39; } } ) script > body > html >
3.2 v-bind v-bind主要使用于绑定属性如title&＃xff0c;src&＃xff0c;value等
< htmllang &＃61; " en" > < head> < metacharset &＃61; " UTF-8" > < metaname &＃61; " viewport" content &＃61; " width&＃61;device-width, initial-scale&＃61;1.0" > < title> title > head > < body> < divid &＃61; " app" > div > < scriptsrc &＃61; " vue.js" > script > < script> let app &＃61; new Vue ( { el: &＃39;#app&＃39; , data: { message: "你好" } } ) script > body > html >
3.3 v-module v-module使用在表单,如input,
< htmllang &＃61; " en" > < head> < metacharset &＃61; " UTF-8" > < metaname &＃61; " viewport" content &＃61; " width&＃61;device-width, initial-scale&＃61;1.0" > < title> title > head > < body> < divid &＃61; " app" > < h1> h1 > div > < scriptsrc &＃61; " vue.js" > script > < script> var app &＃61; new Vue ( { el: &＃39;#app&＃39; , data: { message: &＃39;&＃39; } } ) script > body > html >
京公网安备 11010802041100号